FrontendIntermediate
Pseudo-class
PronunciationSOO-doh-klas
Definition
A pseudo-class is a keyword added to a CSS selector that specifies a special state of the selected element. It allows you to style elements based on user interaction or their position in the document tree.
Where you hear it
In CSS styling tasks, during frontend code reviews, or when implementing interactive UI components.
Examples
Use the
:hoverpseudo-class to change the button color when the user moves the mouse over it.The
:focuspseudo-class is essential for accessibility to highlight elements when they are selected via keyboard navigation.
Common mistake
Confusing pseudo-classes with pseudo-elements; remember that pseudo-classes target a state of an existing element, while pseudo-elements target specific parts of an element, like ::before or ::after.