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.
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.
:activeare used to provide feedback for user interaction (e.g. changing a button's color on hover)
:visitedare useful for styling links based on navigation history (e.g. changing the color of visited links)
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
Creates a styled checkbox with animation on state change.
Creates a styled radio button with animation on state change.
Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip.