Pseudo selectors help us to define the state of the element in a particular situation.
For example, it can be used:
- Style of the element when the user mouses over it.
- Style of the element when the user focuses on it.
- Before, After pseudo selectors.
- Style of visited, active link.
1. Universal Selector
/*1) universal selector*/
*{
margin: 0;
padding: 0;
overflow: 0;
}
This is the universal selector which helps you to select the entire html elements.
2. Individual Selector
/* individual selector */
p{
background-color: rgb(187, 209, 26);
}
The individual selector will help us to select the specific selector, like in the above example "
" tag is selected, avoid using individual selectors.
3. Class and Id selectors
.class_name{}
#id_name{}
It is one of the mostly use selectors, In the above example, we can see that a particular class can be targeted using dot (.) and id from (#).
4. and selector (chained)
/* In html = <li class="bg_black text-white">...</li> */
li.bg_black.text-white{
}
In the above example, it is clearly specified that first comes li tag inside which we have bg_black class then text-white class followed by dot.
5. Combined Selector
/* select all span and li (comma means and) */
span , li{
}
In the above example we have selected all the span , li tags in HTML page comma(,) here means and.
6. Inside an element
/*
In Html:
<div>
<ul>
<li></li>
</ul>
</div> */
div ul li{}
In the above example we have
7. Direct Child
/* <div>
<li></li>
</div> */
div > li{}
In the above example the direct child of div is li and will be written by using > sign in css.
8. Sibling ~ or +
/*
<div class = "sibling"> hi </div>
<p> text1 </p>
<p> text2 </p>
<p> text3 </p> */
/* output = hi text1 */
.sibling + p{}
/*<div class = "sibling"> hi </div>
<p> text1 </p>
<p> text2 </p>
<p> text3 </p> */
/* o/p = hi text1 text2 text3 */
.sibling ~ p{}
9. Before and After selectors
/*1) ::before ::after
<label class="imp-label">
name
</label> */
.imp-label :: before{
}
.imp-label :: after{
}
Before and After selector will helps to add text or shape or image before the particular label as shown in the above example.
10. Hover selectors
/*2) hover */
li:hover{
background-color: aqua;
}
The above example will help to change the background colour of li when user hover the mouse over it.
11. Focus Selector
/*3) focus */
input:focus{
background-color: aquamarine;
}
The above example will help to change the background colour of input field when user focus the mouse over it.
12. First child , Last child
/* First child of li */
li:first-child{
background-color: blue;
}
/* Last child of li */
li:last-child{
background-color: blue;
}
/* Second child of li */
li:nth-child(2){
background-color: blue;
}