Selectors and Cascade

Specificity Override

A notice begins with base declarations, then warning and confirmed declarations win because the browser resolves the cascade.

Program

Each CSS line declares a possible rendered state; it does not execute like a JavaScript statement. The visible delta appears when the browser matches selectors, compares specificity, and resolves which declaration applies.

The highest matching specificity supplies the final declaration.Specificity Cascadematching rules -> weights -> rendered valueThe browser compares matching rules before painting..notice0-1-0blue.warning0-1-0orange.notice.confirmed0-2-0greenconfirmed rule paints greenThe highest matching specificity supplies the final declaration.
Figure: The cascade picks the winning declaration. Model source: books/css/01selectors_cascade/specificity_override/diagrams/specificity_cascade.semantic.json.
specificity_override.html
Visuals: captured from real browser rendering
<style>
.notice { background: #eef2ff; color: #1e3a8a; }
.notice { padding: 18px; border-radius: 8px; }
.notice.warning { background: #fef3c7; color: #92400e; }
.notice.warning.confirmed { border: 3px solid #16a34a; }
</style>

<aside class="notice warning confirmed">
  <strong>Deploy Notice</strong>
  <p>Release approved after checks pass.</p>
</aside>

  1. Apply the base notice colors.

    The notice becomes a blue-tinted information panel.
    A broad class selector provides the default notice style.

  2. Add panel spacing and rounded corners.

    The notice gains a compact rounded panel shape.
    Layout declarations can share the same selector.

  3. Let the warning selector override base colors.

    The notice shifts from blue to amber.
    Two class selectors outrank the single-class color rule.

  4. Add the final confirmed state border.

    A green border marks the confirmed warning.
    The most specific state selector adds a final visual signal.
cascade The cascade is the browser process that resolves competing declarations for the same property.
specificity Specificity is the selector weight used by the cascade.

Exercise: specificity_override_exercise.html

Use specificity to render the confirmed notice