HTML 5

Selectors in CSS

This article explains one of the CSS rules, “selectors”, with suitable examples for a better understanding.

Selectors

Selectors are one of the most important aspects of CSS that allow you to select and manipulate HTML elements. Basically selectors are the CSS rule set that actually find or select the HTML elements you want to style based on their id, classes, attributes, types, values of attributes and much more.

In other words CSS selectors are the rule set that are used to select the HTML content on HTML pages so that they can be styled as we choose..

Types of CSS Selectors

Basically there are five types of selectors that are as follows:

types of selectors

Universal Selector

The universal selector plays the role of a wild card character that selects all the elements on the page. The HTML pages are made up of various tags and using this selector, all the tags are affected according to the style specified in the style block.

As you can see, the universal selector is declared using an asterisk (*). You can also use this selector in combination with another selector.

The “syntax” of the universal selector is given below.

  1. *{ color: green;  
  2.     font-family: arial black;  
  3.     text-align: center; } 

Let's see the example to implement this selector.

  1. <html>  
  2. <head>  
  3. <title>Universal selector</title>  
  4. <style>  
  5. *{color:green;  
  6.    font-family:arial black;  
  7.    text-align:center;}  
  8. </style>  
  9. </head>  
  10. <body>  
  11. <p>This selector will affect all the tags..</p>  
  12. <h1>This is Universal selector</h1>  
  13. <h4>All tags are affected</h4>  
  14. </body>  
  15. </html> 

Output

Universal selector

Element type selector

This selector is also known as a “type selector” that selects the elements based on the same name of elements.

Thus, the selector name <p> would match all the HTML <p> elements or selector name <ul> would match all the HTML <ul> elements.

The syntax of an element type selector is given below.
  1. p{color:green;  
  2. font-family:arial black;}
     
  3. ul{list-style-type: circle;  
  4. border: solid 1px #ccc;  
  5. color: red;} 

Let's understand this selector with an example.

  1. <html>  
  2. <head>  
  3. <title>Element type selector</title>  
  4. <style>  
  5. p{color:green;  
  6.     font-family:arial black;}  
  7.   
  8. ul{list-style-type: circle;  
  9.     border: solid 1px #ccc;  
  10.     color: red;}  
  11. </style>  
  12. </head>  
  13. <body>  
  14. <p>This selector will affect the tags which have the same name of elements..</p>  
  15. <p>This tag is very helpful</p>  
  16. <h1>This is Element type selector</h1>  
  17. <ul>  
  18.   <li>Animals</li>  
  19.   <li>Fruits</li>  
  20.   <li>Electronics</li>  
  21. </ul>  
  22. <ul>  
  23.   <li>Boy</li>  
  24.   <li>Girl</li>  
  25. </ul>  
  26. </body>  
  27. </html> 

In the preceding example there are two type of elements selected, <p> and <ul>, and based on that the following is the output.

Output

Element type selector
ID selector

The id selector is declared using the “hash” character followed by the id of the element. Yes, the id selector uses the id attribute of an HTML tags to find the specific element. This selector searches the id attribute that should match the id specified in the style block. An id should be unique within the page so that you can use the id selector when you want to find the single and unique element. The “hash” symbol is ignored during matching of the element.

Note: Do not start an id name with a number.

The syntax of the id selector is given below.
  1. #para2{color:green;  
  2.               font-family:arial black;}  
  3.  
  4. #list{list-style-type: circle;  
  5.          border: solid 1px #ccc;  
  6.          color: red;} 

Now let's have an example.

  1. <html>  
  2. <head>  
  3. <title>ID selector</title>  
  4. <style>  
  5. #para1{color:blue;  
  6.               font-family:arial black;}  
  7.  
  8. #para2{color:green;  
  9.               font-family:arial black;}  
  10.  
  11. #list{list-style-type: circle;  
  12.          border: solid 1px #ccc;  
  13.          color: red;}  
  14. </style>  
  15. </head>  
  16. <body>  
  17. <p id="para1">This selector will only affect the tags which have the id attribute of elements..</p>  
  18. <p id="para2">This tag is also very helpful</p>  
  19. <p>This paragraph is not affected..</p>  
  20. <h1>This is ID selector</h1>  
  21. <ul id="list">  
  22.   <li>Animals</li>  
  23.   <li>Fruits</li>  
  24.   <li>Electronics</li>  
  25. </ul>  
  26. <ul>  
  27.   <li>Boy</li>  
  28.   <li>Girl</li>  
  29. </ul>  
  30. </body>  
  31. </html> 

In the preceding example there are two id attributes, one for a paragraph and the other for a list and based on that the following is the output.

Output

ID selector

Class selector

The class selector is one of the most useful selectors. Its declaration is done with a dot preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer. The class selector also matches all elements on the page that have their class attribute set to the same value as the class, minus the dot.

Note: Do not start a class name with a number.

The syntax of the class selector is given below.

  1. .center{color:blue;  
  2.              font-family:arial black;  
  3.              text-align: center;}  
  4.   
  5. .list{list-style-type: circle;  
  6.         border: solid 1px #ccc;  
  7.         color: red;} 

Let's have an example of this selector.

  1. <html>  
  2. <head>  
  3. <title>Class selector</title>  
  4. <style>  
  5. .center{color:blue;  
  6.               font-family:arial black;  
  7.               text-align: center;}  
  8.   
  9. .list{list-style-type: circle;  
  10.        border: solid 1px #ccc;  
  11.        color: red;}  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <p class="center">This selector will only affect the tags which have the class attribute of elements..</p>  
  16. <p class="center">This tag is also very helpful</p>  
  17. <p>This paragraph is not affected..</p>  
  18. <h1 class="center">This is Class selector</h1>  
  19. <ul class="list">  
  20.   <li>Animals</li>  
  21.   <li>Fruits</li>  
  22.   <li>Electronics</li>  
  23. </ul>  
  24. <ul>  
  25.   <li>Boy</li>  
  26.   <li>Girl</li>  
  27. </ul>  
  28. </body>  
  29. </html> 

Output

Class selector

Note: You can also specify that only specific HTML elements should be affected by a class.

Syntax
  1. p.center{color:blue;  
  2.     font-family:arial black;  
  3.     text-align: center;}  
  4.   
  5. ul.list{list-style-type: circle;  
  6.    border: solid 1px #ccc;  
  7.    color: red;} 

See the demo in the following example.

  1. <html>  
  2. <head>  
  3. <title>Class selector</title>  
  4. <style>  
  5. p.center{color:blue;  
  6.                 font-family:arial black;  
  7.                 text-align: center;}  
  8.   
  9. ul.list{list-style-type: circle;  
  10.            border: solid 1px #ccc;  
  11.            color: red;}  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <p class="center">This selector will only affect the tags which have the class attribute of elements..</p>  
  16. <p class="center">This tag is also very helpful</p>  
  17. <p>This paragraph is not affected..</p>  
  18. <h1 class="center">This is Class selector</h1>  
  19. <ul class="list">  
  20.   <li>Animals</li>  
  21.   <li>Fruits</li>  
  22.   <li>Electronics</li>  
  23. </ul>  
  24. <ol class="list">  
  25.   <li>Boy</li>  
  26.   <li>Girl</li>  
  27. </ol>  
  28. </body>  
  29. </html> 

Output

Output

You can see that the class “center ” is also defined in a <h1> but it is not affected, similarly in an <ol> is not affected since in the style there is no specification of <h1> and <ol>.

Grouping selector

Very often you might have seen elements with the same style in the style sheet. For example:

  1. p{color:blue;  
  2. font-family:arial black;  
  3. text-align: center;}  
  4.   
  5. h1{color:blue;  
  6. font-family:arial black;  
  7. text-align: center;}  
  8.   
  9. h4{color:blue;  
  10. font-family:arial black;  
  11. text-align: center;} 

In this case, there is a need for minimization of the code. To minimize the code, you can make the group selectors by separating them with a comma.

Let's look at that with an example.

  1. <html>  
  2. <head>  
  3. <title>Grouping selector</title>  
  4. <style>  
  5. p,h1,h5{color:blue;  
  6.                font-family:arial black;  
  7.               text-align: center;}  
  8.   
  9. ol,ul{list-style-type: circle;  
  10.          border: solid 1px #ccc;  
  11.          color: red;}  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <p>There are two groups of selectors..</p>  
  16. <p>This tag is helpful to minimize the code</p>  
  17. <h5>Hello grouped selectors..!!</h5>  
  18. <h1>This is Grouping selector</h1>  
  19. <ul>  
  20.   <li>Animals</li>  
  21.   <li>Fruits</li>  
  22.   <li>Electronics</li>  
  23. </ul>  
  24. <ol>  
  25.   <li>Boy</li>  
  26.   <li>Girl</li>  
  27. </ol>  
  28. </body>  
  29. </html> 

In the preceding example we have two groups of selectors that are affected by the specified group style that can be seen in the following output.

Output

Grouping selector 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs