Pseudo-classes CSS

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🙏🙏🙏