Specificity Override

A notice begins with a base style, then warning and confirmed selectors win because they are more specific.

Program

The cascade decides which declaration applies. Specific selectors can override broad rules while keeping the base rule useful.

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 resolves competing declarations for the same property.

specificity Specificity is the selector weight used by the cascade.