Fix a CSS specificity conflict without !important

I wrote a rule that should change the color and nothing happens, even though I can see it sitting right there in the file.

Beginner to intermediateRead 4 minDoing: 20 to 30 minutes5 steps

▶ Start

What you'll have at the end

The rule you meant to win is the one that applies, without a single !important added

Before you start

You need

A rule in your own stylesheet that's supposed to change a property on an element and visibly isn't in the rendered page, plus access to that element's markup and every rule that could match it.

Not covered

This does not cover a fight where one side already carries !important, or a conflict between different cascade origins; it only covers two ordinary author rules of different weight.

Leans on

5 steps

Where to go next

An element hidden behind another despite a higher z-index

for a property that's applying correctly but rendering hidden behind another element instead, a stacking-context mismatch this recipe's weight count doesn't touch.

Checked 20 Aug 2026

Part of the CSS cookbook