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 websitesCSS, Visual
Creates a styled checkbox with animation on state change.
CSS, Interactivity
Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip.
CSS, Visual
You can use a CSS pseudo-class selector to style all links in a page, without worrying if they have been visited or not.