What are CSS pseudo-classes?
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
Image credit: Tj Holowaychuk on Unsplash
Recommended snippets
Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip.
Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.
Learn how to create a custom responsive favicon that can adapt its color palette for dark mode with this quick guide.