CSS Selectors and its Types

A CSS selectors is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc. The CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.

Different Types of Selectors :
  • Element Selector
  • Id Selector
  • Class Selector
  • Universal Selector
  • Group Selector
  • Attribute Selector
  • Descendant Selector
  • Child Selector

1. Element Selector : 

The element selector selects the HTML element based on the element names. An element type selector matches every instance of the element in the document tree with the corresponding element type name. For example with p, we can select all <p> element in the html document we need to select.
p {
  color: blue;
  text-align: center;
  font-size: 20px;
  }
 h3 {
  text-align: center;
}

Code Block :

<!DOCTYPE>
<html>
  <head>
    <style>
      p {
        color: blue;
 text-align: center;
 font-size: 20px;
      }

      h3 {
 text-align: center;
      }
    </style>
  </head>
  <body>
    <h3>Element Selector</h3>
    <p>This is test paragraph.</p>
    <p>This is Another test paragraph</p>
  </body>
</html>

Output :

Element Selector

This is test paragraph.
This is Another test paragraph


2. ID Selector :

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element should be unique within a page, so the id selector is used to select one unique element. The id selector is defined with a hash sign (#) immediately followed by the id value.
<!DOCTYPE>
<html>
  <head>
    <style>
      #pg1 {
        color: blue;
 text-align: center;
 font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>This is test paragraph.</p>
    <p id="pg1">This is Another test paragraph</p>
  </body>
</html>

Output :

This is test paragraph.
This is Another test paragraph


3. Class Selector : 

The class selector selects HTML elements with a specific class attribute. The class selector is defined with a period sign (.) immediately followed by the class value. Example :
<!DOCTYPE>
<html>
  <head>
    <style>
      .char {
        color: blue;
 text-align: center;
      }
    </style>
  </head>
  <body>
    <h3 class="char">Class Selector</h3>
    <p>This is test paragraph.</p>
    <p class="char">This is Another test paragraph</p>
  </body>
</html>
Output :

Class Selector

This is test paragraph.
This is Another test paragraph


4. Universal Selector :

The universal selector selects all the elements on the page. It is used as a wildcard character. The universal selector is defined by * (asterisk or star symbol). Example
<!DOCTYPE>
<html>
  <head>
    <style>
      * {
        color: blue;
 text-align: center;
      }
    </style>
  </head>
  <body>
    <h3>Class Selector</h3>
    <p>This is test paragraph.</p>
    <p>This is Another test paragraph</p>
  </body>
</html>
Output :

Class Selector

This is test paragraph.
This is Another test paragraph


5. Group Selector : 

The Group Selector is used to select all the elements with the same style definitions. Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping. For example :
<!DOCTYPE>
<html>
  <head>
    <style>
      p, h3 {
        text-align: center;
    </style>
  </head>
  <body>
    <h3>Group Selector</h3>
    <p>This is test paragraph.</p>
    <p>This is Another test paragraph</p>
  </body>
</html>

Output :

Group Selector

This is test paragraph.
This is Another test paragraph

At above example, instead of writing different style definitions for each element, we used group selector.


6. Attribute Selector : 

The CSS attribute selectors provides an easy way to apply the styles on HTML elements based on the presence of a particular attribute or attribute value. Example :
<!DOCTYPE>
<html>
  <head>
    <style>
      p, h3 {
        text-align: center;
      }
      p[lang="fr"] {
        background-color: yellow;
        color: red;
      }
    </style>
  </head>
  <body>
    <h3>Attribute Selector</h3>
    <p lang="fr">Bonjour le monde</p>
    <p>This is Another test paragraph</p>
  </body>
</html>

Output :

Attribute Selector

Bonjour le monde
This is Another test paragraph

We can also use below selector conditions in attribute selector :

  • p[lang] - Selects all paragraph elements with a lang attribute.
  • p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word "fr".
  • p[lang|="fr"] - Selects all paragraph elements whose lang attribute contains values that are exactly "fr", or begin with "fr_".

7. Descendant Selector :

The descendant selectors are used when we need to select an element that is the descendant of another element. For example the below CSS definitions will applied on paragraph with <b> element.
<!DOCTYPE>
<html>
  <head>
    <style>
      p b {
 color: red;
      }
    </style>
  </head>
  <body>
    <h3>Descendant Selector</h3>
    <p><b>Hello world this is Bold text.</b></p>
    <p>This is Another test paragraph</p>
  </body>
</html>
Output :

Descendant Selector

Hello world this is Bold text.
This is Another test paragraph


8. Child Selector :

The child selector selects all elements that are the immediate children of a specified element. Example :
<!DOCTYPE>
<html>
  <head>
    <style>
      div > p {
        color: red;
      }
    </style>
  </head>
    <body>
      <h3>Child Selector</h3>
      <div>
      <p>Hello world this is Bold text.</p>
      <p>This is Another test paragraph</p>
      </div>
      <p>This is another-one test paragraph</p>
  </body>
</html>

Output :

Child Selector

Hello world this is Bold text.
This is Another test paragraph
This is another-one test paragraph


The above code selects all <p> elements that are immediate children of a <div> element.

Next Topic :