Specificity on a stack of alerts

Style a stack of city service alerts so three CSS rules of different specificity each win exactly where they should, with no !important anywhere.

Worked example. Imagine a page of notices instead of alerts: a bare p { color: #333; } rule colors every paragraph, a .notice { background-color: #eee; } class rule shades every notice, and one urgent notice also carries id="fire-drill" with its own #fire-drill { background-color: #f99; } rule. Every plain paragraph gets the gray text color. Every .notice paragraph gets the light gray background — except #fire-drill, which gets its own pink background instead, because an id selector beats a class selector no matter which rule is written first or last in the file.

Your task. index.html already links styles.css and lists several service-alert paragraphs inside <div id="alerts">, each with class="alert"; exactly one of them also has id="power-outage". In styles.css, write:

• a bare p rule that sets a text color, applying to every paragraph on the page (including the one outside #alerts)
• a .alert rule that sets a background-color, applying to every alert
• a #power-outage rule that sets its own different background-color, which must win on that one paragraph over the .alert rule

Rules.

• Do not use !important anywhere in styles.css.
• Do not use inline style="..." attributes in index.html — every visual change comes from the three selectors above.
• Do not add or remove any <style> block; keep styling in the linked styles.css file.
• The order you write the three rules in styles.css must not matter — specificity should carry the win on its own.

What you'll practice: reading selector specificity (type vs. class vs. id) and letting it — not !important, not file order — decide which rule wins a conflict.

Run it

gonomicon fetch fs-week-1/05-01-service-alerts-specificity
cd 05-01-service-alerts-specificity
gonomicon test
gonomicon submit

Hints

1. Specificity has three levels for this lab: a type selector like p, a class selector like .alert, and an id selector like #power-outage. The more specific one wins when they conflict on the same element.
2. Write all three rules in styles.css — a bare p { ... }, a .alert { ... }, and a #power-outage { ... } — and give the id rule a different background-color than the class rule. You don't need !important, and the order you write the rules in doesn't matter for which one wins.
3. #power-outage is both .alert and #power-outage at once. Give .alert one background-color, and #power-outage a different background-color — since an id selector is more specific than a class selector, the id's background wins on that one paragraph even though .alert still controls every other alert.