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).
Commonly used pseudo-classes
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,:focusand:activeare used to provide feedback for user interaction (e.g. changing a button's color on hover):linkand:visitedare useful for styling links based on navigation history (e.g. changing the color of visited links):first-child,:last-child,:nth-child()andnth-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
Recommended snippets
Custom checkbox
CSS, Visual
Creates a styled checkbox with animation on state change.
Custom radio button
CSS, Visual
Creates a styled radio button with animation on state change.
Tip: The perfect duration for CSS transitions
CSS, Interactivity
Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip.