CSS Pseudo-classes

A pseudo-class is used to define a special state of an element. For example, it can be used to style an element when a user mouses over it, or to style a link differently after it has been visited.

1. User Interaction Pseudo-classes

The most common pseudo-classes are used to give feedback during user interactions.

• :hover — Style an element when the user mouses over it.
• :active — Style an element at the moment it is clicked.
• :focus — Style an element (like an input field) when it is selected.

button:hover {
    background-color: green;
}

2. Structural Pseudo-classes

These allow you to target elements based on their position in the document without needing extra classes.

/* Style the first item */
li:first-child { font-weight: bold; }

/* Style every second item */
li:nth-child(even) { background-color: #f2f2f2; }

3. Form Pseudo-classes

Help users understand the state of a form field.

• :checked — Selects every checked <input> element.
• :disabled — Selects elements that are currently disabled.
• :required — Selects input fields that are mandatory.