Pseudo-Classes: Interactive States and Structural Selectors

Master CSS Pseudo-Classes. Learn to style hover, active, and focus interactive states, and target elements dynamically using :nth-child structural selectors.

Introduction

In static print design, layouts do not change. On the web, however, designs are interactive. Buttons change colors when you hover over them, input borders glow when you click into them, and links turn gray after they have been visited.

To apply styles to elements based on their user interaction states or their positions in the DOM tree, we use Pseudo-Classes. A pseudo-class is a keyword added to a selector that targets elements under specific conditions (like being hovered, focused, or the third child of a parent), making interfaces feel responsive and interactive.

What You Will Learn

  • The syntax of pseudo-classes using the colon notation (:).
  • Styling interactive states: :hover, :focus, :active, and :visited.
  • Using structural selectors: :first-child, :last-child, and :nth-child().
  • Building interactive menu navigations and zebra-striped tables.

Prerequisites

Detailed Explanation: Interactivity and Structure

A pseudo-class is appended directly to a selector using a single colon: selector:pseudo-class.

1. User Action States (Interactivity)

When styling links and buttons, the order in which you write these rules matters to prevent overwrites. Remember the acronym LVHA:

  1. :link / :visited: Style normal unvisited links and links the user has already clicked.
  2. :hover: Style elements when the mouse pointer is placed over them.
  3. :active: Style elements during the click action (while the mouse button is pressed).
  4. :focus: Style interactive elements (like inputs, buttons, and links) when they receive keyboard focus or are selected.

2. Structural Pseudo-Classes

These target elements based on their position in the HTML hierarchy:

  • :first-child / :last-child: Targets the very first or last child inside a parent container.
  • :nth-child(n): Targets the $n$-th child of a parent, where $n$ can be a number, keyword, or algebraic formula:
    • :nth-child(2): Targets the second child.
    • :nth-child(even) / :nth-child(odd): zebra-striping rows.
    • :nth-child(3n): Targets every third element (3, 6, 9, etc.).

Visual Learning Diagram (Mermaid)

graph TD
    Parent[div container] --> C1[p: first-child]
    Parent --> C2[p: nth-child 2]
    Parent --> C3[p: nth-child 3]
    Parent --> C4[p: last-child]
    
    style C1 fill:#10B981,stroke:#fff,color:#fff
    style C2 fill:#3B82F6,stroke:#fff,color:#fff
    style C4 fill:#F59E0B,stroke:#fff,color:#fff

Code Examples

Example 1: Accessible Form Focus States

Let's style an input field that glows and opens up when focused:

/* Custom Input styling */
.form-input {
  border: 1px solid #cbd5e1;
  padding: 10px;
  border-radius: 6px;
  outline: none; /* Disable default browser outline */
  transition: all 0.3s ease;
}

/* Focused State: Glow effect */
.form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

Example 2: Zebra-Striped Table Rows

Use :nth-child to style table rows alternatively:

/* Apply light gray background to even rows */
tr:nth-child(even) {
  background-color: #f8fafc;
}

/* Highlight the first table row (header boundary) */
tr:first-child {
  border-top: 3px solid #3b82f6;
}

Summary

Pseudo-classes, marked by colons (:), dynamically apply styles based on interactive states (:hover, :focus) or DOM coordinates (:nth-child, :last-child). Organizing these rules ensures that user interface elements react logically to user interactions and layouts.

Related Articles

Next Tutorial

How do we style specific parts of an element (like inserting decorative shapes or styling the first letter of a paragraph)? Let's check: Pseudo-Elements.

← Back to Syllabus