CSS Pseudo-classes

CSS Attribute Selectors CSS Pseudo-elements

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.