Selectors in CSS are used to select the element(s) from the HTML document on which we want to apply CSS styles. A CSS selector can help us selecting the elements based on their class, id, type, attribute, etc.
There are various types of selectors available in CSS. In this tutorial, we will discuss the most commonly used CSS selectors. Let’s discuss each selector in detail:
1. CSS Element Selector
The element selector selects all the HTML elements based on the element name itself. All the elements which match the specified element name will be affected by the specified CSS styles.
In the example below, the element selector selects all the <p> elements and applies the specified CSS styles to each of them. Try it out:
Example:
p{
background-color: yellow;
border: 1px solid black;
margin: 5px;
padding: 5px;
}
2. CSS Id Selector
CSS id selector selects a single element from the HTML document which matches the specified id.
As id’s are unique within a webpage, therefore, you can style only a single element using the id selector.
To select an element using the id selector, use a # symbol, followed by the id of the HTML element, like: '#myElement'.
In the example given below, the id selector selects an element which has the id="warning". Try it out:
Example:
#warning{
font-size:20px;
background: orange;
border: 1px solid black;
padding: 5px;
}
3. CSS Class selector
CSS class selector selects all the elements from a web page which match the specified class name.
Unlike the id, multiple elements can have the same class name. Therefore, the class selector can select multiple elements from a webpage.
To select elements using the class selector, use the (.) character followed by the class name, for example, '.myclass'.
The class selector in the example given below selects all the elements having class="green". Try it out:
Example:
.green{
color: green;
text-align: center;
}
4. CSS Universal Selector
CSS universal selector selects all the HTML elements from a web page. Therefore, the styles written under universal selector apply to each and every element of the web page.
A star symbol (*) is used for the universal selector.
The CSS styles written in the below example will be applied to each and every element of the web page.
Example:
*{
color: red;
font-style: italic;
text-align: center;
}
Note: CSS styles written under the universal selector will affect the <body> and <html> elements also.
5. CSS Descendant Selector
CSS descendant selector selects all the matching descendants of a given element.
The descendant selector is used when we want to style each and every element of a given type that is contained inside a given element.
Use a white space between the parent and descendant to select all the descendant elements. For example, 'div p', 'ul li'.
In the example below, the descendant selector selects all the <p> elements which are contained inside the <div> element.
Example:
div p{
background-color: yellow;
margin: 5px;
padding: 5px;
border: 1px solid black;
}
6. CSS Child Selector
CSS child selector selects all the elements which are direct children of the given element.
A greater than symbol(>) is used between the parent and the child to select all direct children. For example, 'div > p'.
The child selector in the example below selects all the <p> elements which are the direct child of the <div> element. Try it out.
Example:
div > p{
background-color: yellow;
margin: 5px;
padding: 5px;
border: 1px solid black;
}
7. CSS Adjacent Sibling Selector
As the name suggests itself, this selector selects the adjacent sibling of the given element.
An addition symbol(+) is used to select the adjacent sibling. For example, 'h1+p'.
In the example below, the adjacent sibling selector selects only that <p> element that comes immediately after the <h1> tag. Try it out:
Example:
h1 + p{
background-color: yellow;
margin: 5px;
padding: 5px;
border: 1px solid black;
}
8. CSS General Sibling Selector
CSS general sibling selector is almost similar to the adjacent selector, except that it selects all siblings instead of the immediate one.
A tilde symbol(~) is used to select all general siblings of an element. For example, 'h1~p' .
In the example below, the general sibling selector selects all the <p> elements that come after the <h1> tag and are on the same level. Try it out:
Example:
h1 ~ p{
background-color: yellow;
margin: 5px;
padding: 5px;
border: 1px solid black;
}
9. CSS Grouping Selector
CSS grouping selector helps us to minimize the repetition of the same CSS styles.
The example below applies color: blue; and text-align: center; to each <h1>, <h2> and <p> elements.
Example:
h1{
color: blue;
text-align: center;
}
h2{
color: blue;
text-align: center;
}
p{
color: blue;
text-align: center;
}
From the above example, we can observe that the same styles are repeated again and again. Wouldn’t it be better if we could group these elements and then apply the same styles just once?
That’s what the grouping selector does.
In the example below, the grouping selector selects the <h1>, <h2> and <p> tags and applies the same styles to each of them. Try it out:
Example:
h1, h2, p{
color: blue;
text-align: center;
}
