CSS Pseudo-classes
Pseudo-classes let us target different states of an element. For example, when hovered, when focused, or when it is the first element within a parent.
What is a Pseudo-class?
Pseudo-classes are denoted with a colon (:), and they target states, positions, or special cases that cannot be targeted with normal attributes.
| Pseudo-class | Description |
|---|---|
| :hover | Applied when the mouse hovers over the element. |
| :focus | Applied when the element (e.g., input field) is focused. |
| :nth-child() | Selects a child element at a specific position. |
| :first-child | Selects the first child of the parent. |
| :last-child | Selects the last child of the parent. |
Interactive Pseudo-classes
These pseudo-classes react to interactions, such as hovering over a link or clicking into an input field.
In the following example, a link turns red on hover, while a text field gets a green border when focused.
Structural Pseudo-classes
Structural pseudo-classes target the position of an element within its parent. This makes it easy to style the first, last, or nth element.
Tips for Using Pseudo-classes
Pseudo-classes simplify state- and structure-based styling. Here are some tips:
- Use :hover and :focus selectors for better user experience.
- Structural pseudo-classes help avoid adding unnecessary extra classes in the HTML.
- Avoid overly complex :nth-child() rules for better code clarity.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
