CSS Selectors

CSS Selectors are used to find HTML elements to apply some style and formatting on them.

Type of CSS Selectors

CSS Selectors can select HTML elements based on their tag name, class, id, and attribute.

Different Types of CSS Selectors are:

  • CSS Element Selector
  • CSS Id Selector
  • CSS Class Selector
  • CSS Universal Selector
  • CSS Group Selector

CSS Element/Tag Selectors

The element selector find elements based on the tag name. Sometimes we call it Tag or Type selector as well. This selector is used to apply some style formatting to particular tag types.

Example of Element Selector:
Let us check a simple example to change text color under paragraph <p> tag. Here we will use “p” as a Element selector:


CSS Id Selector

The Id Selector is used to select elements based on the id attribute of an HTML element. Id Selectors works in two step:

  • First Assign a id to HTML tag using id attribute: Example: <p id="blue-text">
  • To apply style with id selector, write a hash (#) character, followed by the id of the element. #blue-text { color : blue; }

In any HTML Page, id should be uniquely assign to one element only. For an example: if you have assigned id “blue-text” to any tag, do not use it with any other tag. An Id name cannot start with a number!

Example of Id Selector:
Let us check a simple example to change text color under paragraph <p> tag. We will use “#blue-text” as a Id selector to apply CSS Rule:


CSS Class Selector

The Class Selector selects specific elements based on the class attribute. Class Selectors works in two steps:

  • A class can be assigned to any HTML tag using class attribute: Example: <p class="green-text">
  • Class Selector use dot (.) or period character followed by the class name to define CSS Rules. Example: .green-text { color : green; }

In any HTML Page, id should be uniquely assign to one element only. For an example: if you have assigned id “blue-text” to any tag, do not use it with any other tag. A class name cannot start with a number!

Example of Class Selector:
Let us check a simple example to change text color under paragraph <p> tag. Here we will use “.green-text” as a Id selector to apply CSS Rule.


CSS Universal Selector

The CSS Universal selector is used as a select all elements. It is defined by an asterisk character ( * ).

Example of Universal Selector:
In following example, Universal Selector will select all html elements and apply text color blue and font-size 30px including paragraph (p) and heading tag (h1).


CSS Group Selector

The grouping selector is used to combine all the elements that need same style rules. You can apply a style to multiple selectors by separating the selectors with a comma. Example: p, h1 { color : blue; }

Suppose we want to apply blue color to the text under paragraph (p) & heading (h1) tags. We can group them as given in following example:


Complete Example using Different Selectors:

You can try following example which use multiple selectors. Each selector performs his own style formatting.


Congratulations! Chapter Finished. Do you want to practice more?
Exercises & Assignments
  • No Content Found.
  • Interview FAQs
  • No Content Found.