CSS pseudo-classes provide a way to style elements, based on changes to
their state. For example, :hover can be used to apply
additional styles to an element when the user’s pointer hovers over it.
Pseudo-classes let you apply styles to elements in relation to the content
of the document tree (e.g. :first-child), external factors
such as the history of the navigator (e.g. :visited), the
status of their content (e.g. :checked) or the position of
the mouse (e.g. :hover).
Below is a list of the top 5 most commonly used pseudo-classes and their usage. This list is by no means complete. You should always refer to relevant documentation from authoritative sources, such as MDN for more information.
:hover, :focus and :active are
used to provide feedback for user interaction (e.g. changing a button’s
color on hover)
:link and :visited are useful for styling
links based on navigation history (e.g. changing the color of visited
links)
:first-child, :last-child,
:nth-child() and nth-last-child() are useful
when working with collections of elements
:not() is used to match everything except the given
selector and can be useful in styling hard to select elements
:lang() allows you to apply special styles based on the
language of the document and is useful for multilingual websites