I85PREP
⌘ K
Adobe Certified Professional Dreamweaver study materials
Adobe Certified Professional Dreamweaver study resources

Specificity War in a Shared Stylesheet

Adobe Certified Professional Dreamweaver · Put your knowledge to work in context.

All case studies

Specificity War in a Shared Stylesheet

A site uses one external stylesheet, main.css, plus a page-specific home.css linked only on the homepage. A developer added .card .title { color: #1a1a1a; } to main.css. Later, a designer added #featured .title { color: #c0392b; } to home.css to make featured-card titles red. On the homepage, featured titles correctly turn red - but so do all titles inside #featured, including subheadings the designer wanted to stay dark. Meanwhile, an inline style="color: green" on one card title in the CMS output refuses to turn red at all. The team's fix so far has been to append !important to the red rule, which now overrides the inline green too, breaking a deliberate CMS accent. Two rules now both carry !important and the outcome depends on source order.

1. Rank the competing rules by how the browser resolves them, and explain why the inline green beat the ID selector but lost to `!important`.

Read the worked answer

Cascade order for this conflict, highest priority first:

  1. !important declarations (author origin) - the red rule after it was flagged.
  2. Inline style="..." - author origin, but treated as higher than normal author rules.
  3. ID selector #featured .title (specificity 1-1-0).
  4. Class selector .card .title (specificity 0-2-0).

So the inline green (level 2) beat the ID rule (level 3) - that's why the card title wouldn't turn red. Once !important was added, the red rule jumped to level 1 and overrode the inline green, which is exactly the CMS accent the team wanted to keep.

Key point: !important doesn't "add specificity" - it changes the origin/importance tier, which sits above inline styles. That's why it's a blunt instrument here.

2. The designer wants featured *card titles* red but subheadings dark, and must preserve the CMS inline green accent. Propose a rule change that achieves all three without `!important`.

Read the worked answer

Scope the selector to the exact element instead of every .title under #featured, and stop fighting the inline style.

  • Replace #featured .title { color:#c0392b; } with something like #featured .card > .title { color:#c0392b; } so subheadings (different element/class) are untouched.
  • Remove both !important flags. They were only needed to beat the inline green, which you now want to keep. With them gone, the inline green on that one card wins naturally (inline > ID), and the red applies everywhere else.

If the CMS green must be the only inline override and everything else red, this cleanly separates "designer intent" (red via scoped class) from "content-authored accent" (inline green). The lesson: use selector precision to narrow scope, and reserve !important for genuine third-party overrides - never as a specificity tiebreaker between your own rules.