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 
<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>
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