CSS Pseudo-classes: Syntax, Usage, and Examples

CSS pseudo-classes define special states of an element, allowing developers to style elements based on user interactions, positions, or document structures without modifying the HTML markup. These selectors enhance styling flexibility while keeping the HTML clean.

How to Use CSS Pseudo-classes

Pseudo-classes appear as a colon (:) before the class name and attach directly to a selector. The syntax follows this structure:

selector:pseudo-class {
  property: value;
}

For example, the :hover pseudo-class changes a button’s color when a user hovers over it:

button:hover {
  background-color: blue;
}

Common CSS Pseudo-classes

CSS includes many pseudo-classes, but some of the most commonly used are:

• :hover – Styles an element when the user hovers over it.
• :focus – Styles an element when it is focused, such as an input field.
• :nth-child(n) – Targets an element based on its position within a parent.
• :first-child / :last-child – Selects the first or last child of a parent.
• :not(selector) – Applies styles to elements that do not match the selector.

When to Use CSS Pseudo-classes

Enhancing User Experience

Pseudo-classes improve interaction feedback by indicating when an element is hovered over, clicked, or focused.

button:active {
  background-color: darkgray;
}

When the user presses the button, it changes color, providing instant visual feedback.

Targeting Elements Without Additional Classes

Pseudo-classes allow styling without adding extra classes to HTML elements. For instance, the following example styles only the first paragraph inside a section:

section p:first-child {
  font-weight: bold;
}

Only the first paragraph inside any <section> appears in bold.

Styling Form Elements Dynamically

CSS pseudo-classes enable responsive styling of input fields based on user actions, such as focus or invalid input.

input:focus {
  border: 2px solid blue;
}

The border changes when the user clicks inside an input field, improving visibility.

Examples of CSS Pseudo-classes in Action

Example 1: Hover Effects for Navigation Links

nav a:hover {
  color: red;
  text-decoration: underline;
}

When the user hovers over a navigation link, it turns red and underlines, signaling interactivity.

Example 2: Styling Checked Checkboxes

input[type="checkbox"]:checked {
  accent-color: green;
}

The checkbox turns green when selected, improving usability.

Example 3: Alternating Row Colors

tr:nth-child(even) {
  background-color: lightgray;
}

Even-numbered rows in a table receive a background color, improving readability.

Learn More About CSS Pseudo-classes

:before and :after Pseudo-classes

The ::before and ::after pseudo-classes allow developers to insert content before or after an element.

h1::before {
  content: "🔥 ";
}

A fire emoji appears before every <h1> element.

:not() for Exclusions

The :not() pseudo-class excludes certain elements from styling.

p:not(.no-style) {
  color: black;
}

All <p> elements except those with the no-style class receive black text.

Combining Multiple Pseudo-classes

Developers can combine pseudo-classes for more precise styling.

button:hover:active {
  background-color: red;
}

The background turns red only when the button is both hovered over and actively clicked.

CSS pseudo-classes provide dynamic styling based on user interactions, element structure, and more. By mastering pseudo-classes like :hover, :nth-child, and :not(), developers can enhance user experience while keeping CSS manageable and HTML clean.