Question

I am updating someones site. Their markup selecting <a> tags is like this:

#wrapper a{color: red;}

Which is fine. But if I create a <div> within wrapper and give it the <a> tags my own styling eg:

.mydiv a{color: white;}

It simply doesnt work – the color:white in my <div> gets overwritten by the color:red in wrapper, even though the .mydiv css is located below the #wrapper css on my external style sheet. Whats more every other styling – background-color, border, etc – works fine!

Answer 1

This is called specificity.

The selector with the id attribute is more specific than the selector with the class attribute (the former points to a single element but the latter points to multiple elements), so the selector with the id takes precedence over yours regardless of the order.

Your selector needs to be more specific in order to override the other selector:

#wrapper .mydiv a{color: white;}