CSS Selectors

CSS selectors are used to “find” (or select) HTML elements based on their id, class, type, attribute, and more.

Types of CSS Selectors

1. The element Selector

The element selector selects elements based on the element name.You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color)

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

2. The Universal Selector

Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type.This rule renders the content of every element in our document in red.

 * {
	color: red;
   } 

3. The Descendant Selector

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.

 ul em {
	color: red;
   } 

4. The ID Selector

You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.This rule renders the content in black for every element with id attribute set to black in our document.

 #black {
	color: #000000;
   } 

5. The Class Selector

You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.This rule renders the content in black for every element with class attribute set to black in our document.

 .black {
	color: #000000;
   }