The Selectors in CSS are used to select (or target) the HTML element(s) that you want to style. There can be many ways in which you can select the HTML element(s). So from those ways, we will some basic types of selectors.

Types of CSS Selectors:

• CSS Element Selector: In this, the selector targets the element by the element name for styling.

Example:

h1 {
    color:#007A4D;
    text-align:center;
    }

p {
   color:blue;
   text-align:center;
   }

Output:

• CSS Id Selector: This selector targets the id of the HTML element and the id is unique in an HTML document as we learned earlier. So it is used to select the specific element in the document. The id is represented using a hash(#) character as a prefix, followed by the id of the element.

Example:

#paragraph1 {
             color:green;
             }

Output:

• CSS Class Selector: This selector targets the class of the HTML elements and the class attribute can be used by one or more elements in an HTML document. So it is used to select the specific element or group in the document. The class is represented using a period(.) character as a prefix, followed by the class name.

Example:

.para {
       color:red;
       background-color:yellow;
       }

Output:

• CSS Grouping Selector: In this, a group of elements (having the same style) are used as Selectors. So that we don’t have to repeat the same styling for different elements.

Example:

h1,p {
      text-align:center;
      color:green;
      background-color:yellow;
      }

Output:

• CSS Universal Selector: This CSS Selector selects all HTML elements in the document. It is represented by asterisk(*).

Example:

* {
   text-align:center;
   color:blue;
   }

Output:

Hope this article will guide you to recognize all about the Selectors in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.