Explain the wtf

!important is not a specificity boost

MediumThe famous WTFsW14

A vendor stylesheet pins the banner to 200px. The override in our own stylesheet is more specific — it uses an ID — and it is crossed out in DevTools. Adding another ID to the selector did nothing.

A vendor stylesheet you cannot edit sets width: 200px !important on .alert. It also contains #hero .alert { width: 480px }, which is far more specific and is losing anyway. Make the banner 480×60, at a real 480px — not a fraction of the page that happens to come out at 480 today. Adding specificity is the obvious move and it is the wrong tool. Working out what the right one is, and why there is more than one, is the problem.

Hint

Specificity compares two declarations that are already in the same bucket. What decides which bucket a declaration is in — and is there anything that decides a width after the cascade is over?

Live preview800×600

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="page" id="hero"><div class="alert"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; }
.page { width: 600px; padding: 20px; background: #0f0f14; }
/* Vendor stylesheet. You cannot edit this file. */
.alert { width: 200px !important; height: 60px; background: #ff7ab6; }
#hero .alert { width: 480px; }