Chapter 72: CSS Selectors & HTML Structure

Interaction & State Pseudo-Classes

Dynamic state styling with `:hover`, `:active`, `:focus-visible`, `:focus-within`, `:checked`, and `:disabled`.

LEARNING OBJECTIVES ⌵

Understand the role and syntax of CSS pseudo-classes (:pseudo-class) and their (0, 0, 1, 0) specificity weight.
Master the strict cascade ordering rule for interactive links: LVHA (:link, :visited, :hover, :active).
Differentiate between :focus, :focus-visible, and :focus-within to create WCAG 2.2 compliant keyboard navigation.
Style form input lifecycles using :checked, :disabled, :required, :valid, and :placeholder-shown.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine an elevator control panel inside a high-rise skyscraper.

The physical plastic buttons are always present in the wall. But as people interact with the elevator, the buttons transition through different transient states:

When your finger hovers over a button, a back-light glows (Hover State).
While your thumb presses down with mechanical force, the button physically clicks in (Active State).
When a blind or visually impaired person navigates using the braille tactile keyboard, an audible chime signals which button currently has selection (Focus State).
When maintenance locks out the penthouse floor, the button turns dark red and cannot be pressed (Disabled State).

In CSS, Pseudo-Classes (prefixed with a single colon :) are those transient state monitors. An HTML element does not change its tag name or class list when a user clicks or tabs to it. Instead, the browser engine continuously updates the element's internal pseudo-state flags, allowing CSS to apply dynamic visual feedback seamlessly.

Technical Deep Dive & Specifications

The Specificity of Pseudo-Classes

According to the W3C Selectors Level 4 specification, every pseudo-class contributes (0, 0, 1, 0) to specificity—equivalent to a standard class selector or attribute selector.

+---------------------------------------------------------------------------------------------------+
|                                  PSEUDO-CLASS SPECIFICITY MATH                                    |
+-------------------+----------------+--------------------------------------------------------------+
| Selector          | Specificity    | Breakdown                                                    |
+-------------------+----------------+--------------------------------------------------------------+
| `button:hover`    | (0, 0, 1, 1)   | 1 Element (`button`) + 1 Pseudo-Class (`:hover`)             |
| `.btn:active`     | (0, 0, 2, 0)   | 1 Class (`.btn`) + 1 Pseudo-Class (`:active`)               |
| `input:focus:valid`| (0, 0, 2, 1)  | 1 Element (`input`) + 2 Pseudo-Classes                       |
+-------------------+----------------+--------------------------------------------------------------+

The LVHA Link Ordering Rule

When styling anchor tags (<a>), rules with identical specificity resolve based on source order in the stylesheet. If declared out of order, earlier states can swallow later interaction states:

                      THE LVHA DECLARATION ORDER PROTOCOL
                      
                      +---------------------------------+
                      | 1. :link     (Unvisited link)   |
                      +---------------------------------+
                                      |
                      +---------------------------------+
                      | 2. :visited  (Visited link)     |
                      +---------------------------------+
                                      |
                      +---------------------------------+
                      | 3. :hover    (Pointer hover)    |
                      +---------------------------------+
                                      |
                      +---------------------------------+
                      | 4. :active   (Mouse down / click)|
                      +---------------------------------+

Mnemonic: "Lord Vader Handles All" (L - V - H - A) If you declare :hover before :link or :visited, hovering over a visited link will fail to show the hover color because :visited appears later in the cascade with equal specificity!

The Focus Trio: `:focus`, `:focus-visible`, and `:focus-within`

+---------------------------------------------------------------------------------------------------+
|                                      THE FOCUS STATE MATRIX                                       |
+-------------------+-------------------------------------------------------------------------------+
| Selector          | Trigger Mechanism & Best Practice                                             |
+-------------------+-------------------------------------------------------------------------------+
| `:focus`          | Triggers on ANY focus (Mouse click, Touch tap, or Keyboard Tab).              |
| `:focus-visible`  | Triggers ONLY when the browser heuristics determine focus should be visible   |
|                   | (e.g. keyboard Tab key navigation). Prevents ugly mouse-click focus rings.     |
| `:focus-within`   | Matches a PARENT container if the element ITSELF OR ANY OF ITS DESCENDANTS   |
|                   | currently has focus (e.g. highlighting an entire form card when typing).      |
+-------------------+-------------------------------------------------------------------------------+

/* MODERN ACCESSIBILITY BEST PRACTICE: Do NOT remove outlines on :focus! */
button:focus {
  outline: none; /* BAD if used alone! */
}

/* GOOD: Show prominent, high-contrast outlines ONLY for keyboard users */
button:focus-visible {
  outline: 3px solid #0284c7;
  outline-offset: 3px;
}

Form Input Lifecycle Pseudo-Classes

        USER TYPES EMPTY         USER TYPES INVALID           USER SUBMITS VALID
       +-----------------+       +--------------------+       +-------------------+
       | :placeholder-   | ----> | :invalid           | ----> | :valid            |
       |   shown         |       | :not(:placeholder- |       |                   |
       | :required       |       |   shown)           |       |                   |
       +-----------------+       +--------------------+       +-------------------+

:disabled / :enabled: Targets form controls locked via the disabled HTML attribute.
:checked: Targets selected <input type="checkbox">, <input type="radio">, or <option>.
:required / :optional: Targets fields based on the presence of the required attribute.
:valid / :invalid: Evaluates browser constraint validation (e.g. type="email", pattern, min).
:placeholder-shown: True when an input's placeholder is currently visible (i.e. input is empty).

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 18 (.card:focus-within): Highlights the entire form card whenever any child input or button receives keyboard or mouse focus.
Lines 35–45 (.btn:hover, .btn:active): Provides dynamic tactile feedback: darker blue on hover, and a subtle scale(0.97) shrink on mouse-down.
Line 48 (.btn:focus-visible): Renders a crisp 3px blue outline ring when the user tabs into the button via keyboard, meeting WCAG 2.4.7 focus criteria.
Line 55 (.btn:disabled): Disables hover transforms, reduces contrast, and shows the not-allowed cursor for disabled buttons.
Lines 82–88 (input:not(:placeholder-shown):valid/invalid): Applies green/red border feedback only after the user starts typing, avoiding aggressive error states on fresh page loads.
Line 115 (.real-checkbox:checked + .custom-box): Replaces ugly native browser checkboxes with an accessible, high-DPI custom vector checkmark.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interaction & Form State Pseudo-Classes</title>
  <style>
    /* Base Resets */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, sans-serif; padding: 2rem; background: #0f172a; color: #f8fafc; line-height: 1.6; }

.card {
      background: #1e293b;
      padding: 2rem;
      border-radius: 0.75rem;
      border: 1px solid #334155;
      max-width: 480px;
      margin-bottom: 2rem;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

/* 1. :focus-within on Parent Container */
    .card:focus-within {
      border-color: #38bdf8;
      box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    }

/* 2. Interactive Button State Transitions */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 0.375rem;
      border: none;
      cursor: pointer;
      background-color: #2563eb;
      color: #ffffff;
      transition: background-color 0.15s ease, transform 0.05s ease;
    }

/* Hover State */
    .btn:hover {
      background-color: #1d4ed8;
    }

/* Active (Mouse Down) State */
    .btn:active {
      transform: scale(0.97);
      background-color: #1e40af;
    }

/* Accessible Keyboard Focus Ring */
    .btn:focus-visible {
      outline: 3px solid #38bdf8;
      outline-offset: 3px;
    }

/* Disabled State */
    .btn:disabled {
      background-color: #475569;
      color: #94a3b8;
      cursor: not-allowed;
      transform: none;
    }

/* 3. Form Input State Indicators */
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-bottom: 1.25rem;
    }

label { font-weight: 500; font-size: 0.875rem; color: #cbd5e1; }

input {
      font: inherit;
      padding: 0.625rem 0.875rem;
      border-radius: 0.375rem;
      border: 1px solid #475569;
      background: #0f172a;
      color: #f8fafc;
      transition: border-color 0.15s ease;
    }

/* Keyboard focus ring on inputs */
    input:focus-visible {
      outline: 2px solid #38bdf8;
      border-color: #38bdf8;
    }

/* Dynamic Validation feedback */
    input:not(:placeholder-shown):valid {
      border-color: #10b981;
    }

input:not(:placeholder-shown):invalid {
      border-color: #ef4444;
    }

/* 4. Custom Styled Checkbox using :checked */
    .checkbox-label {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;
      user-select: none;
    }

.custom-box {
      width: 20px;
      height: 20px;
      border: 2px solid #64748b;
      border-radius: 4px;
      display: grid;
      place-items: center;
      transition: all 0.2s ease;
    }

.real-checkbox {
      position: absolute;
      opacity: 0;
    }

.real-checkbox:checked + .custom-box {
      background-color: #2563eb;
      border-color: #2563eb;
    }

.real-checkbox:checked + .custom-box::after {
      content: "✓";
      color: #ffffff;
      font-size: 0.75rem;
      font-weight: 800;
    }

.real-checkbox:focus-visible + .custom-box {
      outline: 2px solid #38bdf8;
      outline-offset: 2px;
    }
  </style>
</head>
<body>

<form class="card">
    <h2 style="margin-bottom: 1.25rem; font-size: 1.25rem;">Account Setup</h2>

<div class="form-group">
      <label for="work-email">Corporate Email (Required):</label>
      <input type="email" id="work-email" placeholder="alex@company.com" required>
    </div>

<div class="form-group">
      <label class="checkbox-label">
        <input type="checkbox" class="real-checkbox" checked>
        <span class="custom-box"></span>
        <span>Receive security audit alerts</span>
      </label>
    </div>

<div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
      <button type="submit" class="btn">Save Changes</button>
      <button type="button" class="btn" disabled>Export Logs</button>
    </div>
  </form>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+-------------------------------------------------------------+
| Account Setup                                               |
|                                                             |
| Corporate Email (Required):                                 |
| [ [email protected]          ] (Green border when valid)     |
|                                                             |
| [✓] Receive security audit alerts (Custom blue checked box) |
|                                                             |
| [ Save Changes (Blue) ]   [ Export Logs (Disabled Gray) ]   |
+-------------------------------------------------------------+
(Card glows cyan when any internal input is focused)

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Accessible Star Rating Radio Group

Instructions:

Construct an accessible 5-star rating widget using 5 radio inputs (name="rating") and their corresponding <label> elements.
Structure the HTML in reverse order (5 down to 1) or use the general sibling combinator with :hover and :checked.
When hovering over a star, that star and all preceding stars should illuminate gold (#f59e0b).
When a rating is :checked, the selected star and all stars before it should stay illuminated gold.
Provide a visible focus ring on the label when navigating via keyboard using :focus-visible.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Star Rating Challenge - Solution</title>
  <style>
    /* Base Resets */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, sans-serif; padding: 3rem; background: #0f172a; color: #f8fafc; }

    fieldset {
      border: none;
      background: #1e293b;
      padding: 2rem;
      border-radius: 0.75rem;
      max-width: 400px;
      border: 1px solid #334155;
    }

    legend {
      font-size: 1.125rem;
      font-weight: 700;
      color: #38bdf8;
      margin-bottom: 1rem;
    }

    /* Flex row-reverse trick allows sibling selector (~) to illuminate preceding stars */
    .star-rating {
      display: inline-flex;
      flex-direction: row-reverse;
      gap: 0.5rem;
      justify-content: flex-end;
    }

    /* Visually hide real radio inputs */
    .star-rating input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
    }

    /* Star Label default state (gray) */
    .star-rating label {
      font-size: 2rem;
      color: #475569;
      cursor: pointer;
      transition: color 0.15s ease, transform 0.15s ease;
    }

    /* Hover over a star: illuminates hovered star and all stars before it */
    .star-rating label:hover,
    .star-rating label:hover ~ label {
      color: #f59e0b;
      transform: scale(1.15);
    }

    /* Checked state: illuminates selected star and all stars before it */
    .star-rating input:checked ~ label {
      color: #fbbf24;
    }

    /* Focus visible accessibility outline */
    .star-rating input:focus-visible + label {
      outline: 2px solid #38bdf8;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <fieldset>
    <legend>Rate this Masterclass:</legend>

    <div class="star-rating">
      <input type="radio" id="star-5" name="rating" value="5">
      <label for="star-5" title="5 Stars">★</label>

      <input type="radio" id="star-4" name="rating" value="4">
      <label for="star-4" title="4 Stars">★</label>

      <input type="radio" id="star-3" name="rating" value="3">
      <label for="star-3" title="3 Stars">★</label>

      <input type="radio" id="star-2" name="rating" value="2">
      <label for="star-2" title="2 Stars">★</label>

      <input type="radio" id="star-1" name="rating" value="1">
      <label for="star-1" title="1 Star">★</label>
    </div>
  </fieldset>

</body>
</html>

Why this works:

Using flex-direction: row-reverse, the DOM structure orders stars from 5 to 1 in HTML, but renders them from 1 to 5 visually.
When star 3 is checked, input:checked ~ label selects all sibling labels following star 3 in the DOM (which are stars 2 and 1), causing stars 1, 2, and 3 to light up gold.

⚠️ Common Pitfalls

Stripping Outlines Globally with * { outline: none; }: This is a severe WCAG failure that renders your site impossible to navigate for millions of motor-impaired and keyboard-only users. Always replace default outlines with :focus-visible styles.
Violating the LVHA Order: Declaring a:hover { ... } before a:visited { ... } will cause visited links to remain static when hovered.
Confusing :disabled with [disabled]: In standard HTML, :disabled and [disabled] match the same elements. However, :disabled is a dynamic pseudo-class that also applies to form elements disabled via <fieldset disabled>.

💡 Pro Tips

Container Interaction with :focus-within: Use :focus-within on search bars to expand autocomplete dropdown menus automatically without writing JavaScript focus listeners.
Preventing Flash of Red with :user-invalid: The modern :user-invalid pseudo-class only triggers validation styles after the user has explicitly interacted with and blurred the input, eliminating initial form load error flashes.

📌 Key Takeaways

Pseudo-classes represent dynamic element states and contribute (0, 0, 1, 0) to specificity.
Link state pseudo-classes must follow the LVHA cascade order: :link -> :visited -> :hover -> :active.
:focus-visible renders focus outlines exclusively for keyboard/assistive navigation, preventing unwanted mouse-click rings.
:focus-within activates on a parent element whenever any of its descendants gain focus.
Form pseudo-classes (:checked, :disabled, :valid, :invalid, :placeholder-shown) enable powerful zero-JS client state styling.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Why must `:hover` be declared AFTER `:visited` in a CSS stylesheet?

Topic: HTML Fundamentals

? Question 2 / 3

Which pseudo-class allows a parent `<div>` to change its border color when an `<input>` nested inside it receives focus?

Topic: HTML Fundamentals

? Question 3 / 3

What is the specificity calculation for the selector `form.auth-form input[type="text"]:focus:valid`?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The Specificity of Pseudo-Classes

The LVHA Link Ordering Rule

The Focus Trio: :focus, :focus-visible, and :focus-within

Form Input Lifecycle Pseudo-Classes

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Accessible Star Rating Radio Group

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Why must :hover be declared AFTER :visited in a CSS stylesheet?

Which pseudo-class allows a parent <div> to change its border color when an <input> nested inside it receives focus?

What is the specificity calculation for the selector form.auth-form input[type="text"]:focus:valid?

The Focus Trio: `:focus`, `:focus-visible`, and `:focus-within`

Why must `:hover` be declared AFTER `:visited` in a CSS stylesheet?

Which pseudo-class allows a parent `<div>` to change its border color when an `<input>` nested inside it receives focus?

What is the specificity calculation for the selector `form.auth-form input[type="text"]:focus:valid`?