CSS Tutorial || CSS Selectors

author
January 27, 2024

CSS Selectors



CSS selectors are used to "find" (or select) the HTML elements you want to style
CSS selectors select HTML elements according to its id, class, type, attribute etc.
Different types of selectors in CSS.


  1. CSS Element Selector
  2. CSS Id Selector
  3. CSS Class Selector
  4. CSS Universal Selector
  5. CSS Group Selector
  6. Type selector
  7. Attribute selector

Universal selector

Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.
Syntax: * ns|* *|*
Example: * will match all the elements of the document.


  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <style>  

  5. * {  

  6.    color: red;  

  7.    text-align: center;  

  8. }   

  9. </style>  

  10. </head>  

  11. <body>  

  12. <h2>This is heading</h2>  

  13. <p>This is paragraph1.</p>  

  14. <p > This is paragraph2.</p>  



  16. </body>  

  17. </html>    


RESULT


This is heading

This is paragraph1.
This is paragraph2.


element selector

Selects all elements that have the given node name.
Syntax: elementname
Example: input will match any <input> element.


  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <style>  

  5. p.para1 {   

  6.    color: red;  

  7.   text-align: center;   

  8. }   

  9. </style>  

  10. </head>  

  11. <body>  

  12. <h2 class="para1">This is heading</h2>  

  13. <p class="para1">This is paragraph1.</p>  

  14. <p > This is paragraph2.</p>  



  16. </body>  

  17. </html>    


RESULT


This is heading

This is paragraph1.
This is paragraph2.


Class selector

Selects all elements that have the given class attribute.
Syntax: .classname
Example: .index will match any element that has a class of "index".


  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <style>  

  5. .para1 {   

  6.    color: red;  

  7.   text-align: center;   

  8. }   

  9. </style>  

  10. </head>  

  11. <body>  

  12. <h2>This is heading</h2>  

  13. <p class="para1">This is paragraph1.</p>  

  14. <p > This is paragraph2.</p>  



  16. </body>  

  17. </html>    


RESULT


This is heading

This is paragraph1.
This is paragraph2.


ID selector

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
Syntax: #idname
Example: #toc will match the element that has the ID "toc".


  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <style>  

  5. #para1 {   

  6.    color: red;  

  7.    text-align: center;  

  8. }   

  9. </style>  

  10. </head>  

  11. <body>  

  12. <h2>This is heading</h2>  

  13. <p id="para1">This is paragraph1.</p>  

  14. <p > This is paragraph2.</p>  



  16. </body>  

  17. </html>    


RESULT


This is heading

This is paragraph1.
This is paragraph2.



Attribute selector

Selects all elements that have the given attribute.
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).
CSS classes can be reusable and applied to many elements. Class selectors are denoted with a period ' . 'followed by the class name. CSS ID selectors should be unique and used to style only a single element. ID selectors are denoted with a hash sign' # 'followed by the id name


  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <style>  

  5. a[target] { 

  6.    background-color: yellow;  

  7. }   

  8. </style>  

  9. </head>  

  10. <body>  

  11. <a href="https://www.4utechie.com/">techie1 </a> 

  12. <a href="https://www.4utechie.com/" target="_blank">techie2 </a>

  13. <a href="https://www.4utechie.com/" target="_top">techie3 </a>

  14. </body>  

  15. </html>    



RESULT
tchie1 tchie2 tchie3

Grouping selectors

Selector list
The , is a grouping method, it selects all the matching nodes.
Syntax: A, B
Example: div, span will match both <span> and <div> elements.




  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <style>  

  5. h2, p {    

  6.    color: red;  

  7.    text-align: center;  

  8. }   

  9. </style>  

  10. </head>  

  11. <body>  

  12. <h2>This is heading</h2>  

  13. <p id="para1">This is paragraph1.</p>  

  14. <p > This is paragraph2.</p>  



  16. </body>  

  17. </html>    


RESULT


This is heading

This is paragraph1.
This is paragraph2.