Pseudo-classes CSS
Pseudo-classes are important to make our webpage interactive. We will learn various frequently used pseudo-classes in this blog.
Pseudo-classes are widely used to make our webpage interactive like applying styles on hover of a button (:hover) and changing the styles if a checkbox is checked (:checked) etc.,
a pseudo-class is denoted by a colon(:) followed by the pseudo-class name.
Eg., :hover, :checked
element:pseudo-class{
property: value
}
let's go through some frequently used pseudo-classes
:hover
it matches when the user hovers over a specified element.
button:hover{
background-color: #fff;
}
:active
Matches when the user activates any element i.e., When the user presses the primary mouse button.
button:active{
background-color: #fff;
}
:focus
Matches when the input element has focus on it.
button:focus{
background-color: #fff;
}
Please refer to documentation to learn more pseudo-classes. Will see all the above classes in an example below.
:first-child
it selects the first direct sibling of the specified element.
:last-child
it selects the last direct sibling of the specified element.
:nth-child(n)
similar to :first-child and :last-child, it selects the nth sibling of the specified element.
- if n is odd ==> it will selects all odd elements.
- if n is even ==> it will select all the even elements.
- if 3n ==> it will select every 3rd element.
- if An + B ==> Select the list indices which match the pattern.
Some of the examples for An + B
- :nth-child(n+7) ==> 7(0 + 7), 8(1 + 7), 9(2 + 7) etc.,
- :nth-child(2n+1) ==> 1 (20 + 1), 3(21 + 1), 5(2*2 + 1) etc.,
- :nth-child(-n+2) ==> 2(-0 + 2), 1(-1 + 2), 0(-2 + 2)
:only-child
Selects the element if it is the only child of the parent element.
:first-of-type
li:first-of-type{
color: red
}
This will select the first li type element inside the parent even though there are some other elements before li.
:last-of-type
li:last-of-type{
color: red
}
This will select the last li type element inside the parent even though there are some other elements after li.
:nth-of-type
li:nth-of-type{
color: red
}
This will select the nth li type element inside the parent even though there are some other elements before/after li.
:only-of-type
span:only-of-type{
color: red
}
This will select the span if there is only one span element present inside the parent.
Thanks for reading this article🙏🙏🙏