Order of execution

Question

I have a fairly large page, which contains lots of css and html. The page is divided in regions. Somewhere the basics for each region are set (for instance text colour, link colour, etc).

This is done at the beginning of the CSS file. You have, however, the option to customize the look of modules inside a region. So consider the fact that I have a .right-zone class on the sidebar. I put a .navigation-module in there. Once I have customized the .navigation-module (through YUI) the customized CSS is added to the standard CSS file and is saved.

I would expect that CSS is interpreted from top to bottom.

.right-zone a { color: #ff0000; }

Is the base of the document. So after customization it becomes:

.right-zone a { color: #ff0000; }
.navigation-module a { color: #0000ff; }

So imagine the structure of the document:

[...]
<div class="right-zone">
  <div class="navigation-module">
    <a href="http://www.stackoverflow.com/"&gt;foobar link</a>
  </div>
</div>

I can only assume that the final colour for the link would be #0000ff - since it's the last declaration in the CSS file. For some reason, it's not doing this on my site.

The "general" CSS is defined on line 335 - the definition for the navigation-module is on line 409 and yet the link is still colored red instead of blue.

Firebug shows the red color as the finally applied styling and has a strike-through on the blue one. Any ideas why this is happening?

Answer 1

It's cascading. So a lower rule has precedence.

// this would work as desired...
.right-zone a { color: #ff0000; }
.right-zone .navigation-module a { color: #0000ff; }

Alternativelly you can use important to overide the precedence.

.right-zone a { color: #ff0000; }
.navigation-module a { color: #0000ff !important; }

Hope it helps!

Answer 2

Your example gives a blue link for me, as it should. I assume that your real CSS selectors are more complex, and the first is more specific than the second.

A later rule only overrides an earlier one if it has the same or greater specificity. For example, .navigation-module a won't override an earlier #right-zone a or .right-zone div a rule.

Answer 3

This has to do with so-called CSS Specificity as well (as Frankie touched on a bit). See CSS-Tricks on Specificity

Basically:

[any selector] .navigation-module a { color: #0000ff; }

would make it more "specific" and therefore override the other style. Also note that yes the last definition with the same specificity will win.