6

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Jonathan
  • 5,495
  • 4
  • 38
  • 53
  • 4
    This link looks to be pretty thorough, and as a bonus, there are pictures of storm troopers and darth vader. [CSS Specificity](http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/) – James Montagne Feb 03 '12 at 18:30

3 Answers3

10

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

  • That is fantastically clear. So, if I changed `.special` to `a.special` it would win because it is last in the document? – Jonathan Feb 03 '12 at 18:35
  • 2
    @Jonathan -- yes, they would tie and `a.special` would win. –  Feb 03 '12 at 18:36
  • Regarding the "note", the winning style is whichever has the most points, but, it is biased toward higher specificity? For instance, `1 0 0` would beat `0 100 100`. Similarly, `0 1 100` would beat `0 0 1000`? – Jonathan Feb 03 '12 at 18:44
  • @Jonathan Just one refinement: attributes also count. They have the same specifity as class names. So for instance `img[title]` (image that has a title attribute) is just as specific as `img.cname` (image with class="cname") – Mr Lister Feb 03 '12 at 21:41
  • 1
    @Mr Lister: Pseudo-classes too (except [`:not()`](http://www.w3.org/TR/css3-selectors/#negation) which works differently). And pseudo-elements fall in the same category as type (not tag) selectors. – BoltClock Feb 04 '12 at 03:31
2

I would suggest you get familiar with this for future reference. For this particular case, note point 3 under Cascading Order:

  1. Count the number of ID attributes in the selector.
  2. Count the number of CLASS attributes in the selector.
  3. Count the number of HTML tag names in the selector.

If these are applied to your code, .item a has 1 class attribute + 1 HTML tag name, while .special has only one class attribute. Hence, the former wins the right to style the special link.

Artyom
  • 1,599
  • 12
  • 22
1

http://www.w3.org/TR/CSS21/cascade.html#specificity is the official specificity specification.

But if that's TL;DR, the (too) short version is the more words you have in your selector, the higher the specificity. And with !important even higher. That's about it.

Edit: oh, I see that your link has the same information as mine. Sorry about that.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • This isn't true, it depends what those "words" are. More doesn't always mean it's more specific. – James Montagne Feb 03 '12 at 18:33
  • 1
    Perhaps that is why it was the "too" short version. – Jonathan Feb 03 '12 at 18:36
  • Yes it is, it's true. The W3C says so! Oh wait, you mean my remark. That was meant as an answer to the question why `.item a` is more specific than `.special`. Sorry if I didn't make that clear. The link has more information. – Mr Lister Feb 03 '12 at 18:36