Structural, Link and Form State Selectors

What Is It?

Structural pseudo-classes match position among siblings, while link and form pseudo-classes match interaction or control states.

Properties, Tags and Attributes Explained

• :first-child / :last-child / :only-child: Match the first, last, or only element child.
• :nth-child() / :nth-of-type(): Count all element siblings or only siblings of the same tag type.
• :empty: Matches an element without element or text children; whitespace text can prevent a match.
• :link / :visited / :active: Match unvisited links, visited links, or activation state; visited styling is privacy-restricted.
• :focus-within: Matches an element that has focus itself or contains a focused descendant.
• :enabled / :disabled / :read-only: Match relevant native control states.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: List positions

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Structural, Link and Form State Selectors</title>
  <style>
    li { padding: 8px; }
    li:first-child { border-top: 3px solid #2563eb; }
    li:last-child { border-bottom: 3px solid #7c3aed; }
    li:nth-child(even) { background: #dbeafe; }
  </style>
</head>
<body>
  <ol><li>Read</li><li>Edit</li><li>Practice</li><li>Review</li></ol>
</body>
</html>

What you see: The list has a top and bottom accent, and even positions have a blue background.

Example 2: Focus inside a group

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Structural, Link and Form State Selectors</title>
  <style>
    .field { padding: 16px; border: 2px solid #cbd5e1; }
    .field:focus-within { border-color: #2563eb; background: #eff6ff; }
    input:disabled { background: #e2e8f0; cursor: not-allowed; }
  </style>
</head>
<body>
  <div class="field"><label for="learner">Learner</label> <input id="learner"></div><p><label for="locked">Generated ID</label> <input id="locked" value="CSS-01" disabled></p>
</body>
</html>

What you see: Focusing the editable input highlights its group. The disabled control remains unavailable to editing.

When and Where to Use It

Use structural selectors for repeated lists and focus-within to highlight the form group currently being edited.

Common Mistake or Useful Tip

nth-child counts sibling elements regardless of tag name. nth-of-type counts only siblings with the same element type.

Try It Yourself

Insert a non-list element in a separate div-based demo and compare nth-child with nth-of-type.