CSS pseudo-class selector
Pseudo-classes allow you to target elements that you wouldn't be able to target otherwise. A pseudo-class follows a selector it specifies with a colon (:
) between them. Most selectors of this type can be loosely divided into 2 groups:
- Dynamic pseudo-class selectors, like
a:hover:
They allow us to target elements that users are interacting with. For example, the:hover
selector allows you to change the style of links users hover over. - Structural pseudo-class selectors like
p:first-child:
This type of selector allows us to indicate elements with higher accuracy. For example,:first-child
and:last-child
allows you to target the first or last element among a group of sibling elements, respectively.[1]