CSS Pseudo-classes

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:

1. :hover: Applies styles when the mouse cursor is over an element.
2. :active: Applies styles to an element while it is being activated (e.g., clicked).
3. :focus: Applies styles to an element that has keyboard focus.
4. :visited: Applies styles to links that have been visited.
5. :first-child: Selects the first child element of its parent.
6. :last-child: Selects the last child element of its parent.
7. :nth-child(n): Selects the nth child element of its parent.
8. :nth-of-type(n): Selects the nth element of its type among siblings.
9. :not(selector): Selects elements that do not match the given selector.
10. :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.