CSS pseudo-classes are used to select and style elements based on their state or position in the document tree. They are preceded by a colon (:) and are applied to specific elements or groups of elements. Pseudo-classes provide a way to target elements that cannot be easily selected using regular selectors.
Here are some commonly used CSS pseudo-classes:
- :hover: Applies styles when the mouse cursor is over an element.
- :active: Applies styles to an element while it is being activated (e.g., clicked).
- :focus: Applies styles to an element that has keyboard focus.
- :visited: Applies styles to links that have been visited.
- :first-child: Selects the first child element of its parent.
- :last-child: Selects the last child element of its parent.
- :nth-child(n): Selects the nth child element of its parent.
- :nth-of-type(n): Selects the nth element of its type among siblings.
- :not(selector): Selects elements that do not match the given selector.
- :empty: Selects elements that have no children or text content.
These are just a few examples, and there are many more pseudo-classes available in CSS. Pseudo-classes are powerful tools for styling elements based on various conditions, states, and positions, and they can greatly enhance the flexibility and interactivity of your web pages.