Question

How does CSS determine when to apply one style over another?

I have been through the W3 CSS3 selectors document a few times, and that has helped me understand how to better use CSS selectors in jQuery, but it has not really helped me understand when one CSS rule will be applied over another.

I have the following the HTML:

<div class='item'>
    <a>Link 1</a>
    <a class='special'>Link 2</a>
</div>

I have the following CSS:

.item a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 1em;
}

.special {
    text-decoration: underline;
    color: red;
    font-weight: normal;
    font-size: 2em;
}

Given the above, both Link 1 and Link 2 will be styled the same, as determined by the .item a CSS. Why does the style associated with .special not take precedence for Link 2?

Obviously, I can get around it like this:

.special {
    text-decoration: underline !important;
    color: red !important;
    font-weight: normal !important;
    font-size: 1em !important;
}

But, I feel like that is a hack that I have to sprinkle in due to my lack of understanding.

Answer 1

It’s based on IDs, classes and tags. IDs have the highest specificity, then classes then tags, so:

.item a     == 0 1 1      0 (id) 1 (class=item) 1 (tag=a)
.special    == 0 1 0
#foo        == 1 0 0
#foo .bar a == 1 1 1
#foo #bar   == 2 0 0

whichever has the most wins 🙂 If it’s a tie, whichever one comes last in the document wins. Note that 1 0 0 beats 0 1000 1000

If you want .special to apply, make it more specific: .item a.special