CSS - Pseudo-classes

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10–15 minutes

Pseudo-classes match elements in a particular state: interaction, focus, or document structure.

Learning Objectives

• Apply interactive (e.g., :hover, :focus-visible) and structural pseudo-classes (e.g., :nth-child).
• Create accessible focus styles.

Details & Examples

Pseudo-classes select elements in a particular state, such as :hover or :nth-child().

• Interactive: :hover, :active, :focus, :focus-visible, :disabled
• Structural: :first-child, :last-child, :nth-child(), :not()

Common Pitfalls

• Using :focus styles that are hard to see; prefer :focus-visible with clear outlines.

Checks for Understanding

1. How do you select every odd row in a list?

Exercises

1. Build a focus-visible style for links that’s distinct from hover.
2. Stripe a list using :nth-child(odd) and highlight the 3rd item.