CSS rules order

Question

Here I have 8 CSS rules and I'd like to know their order of importance. I'm reading since a while on that but I can't figure out this precise example.

a > b + a, a > b {color: red;}
a > a, a + b {color: brown;}
c > b, c > a > b {color: yellow;}
a > c {color: green;}
c > a {color: green;}

Html Elements:

<a>
  <b>Element 1</b>
  <c>
    <a>Element 2 </a>
    <b>Element 3</b>
    <a>
      <a>Element 4</a>
      <c>Element 5</c>
      <b>Element 6</b>
      <a>Element 7</a>
      <a>Element 8</a>
    </a>
  </c>
  <b>
    <a>Element 9</a>
    <b>Element 10</b>
  </b>
</a>

What would the correct order for these rules?

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ — Seer, May 12 '15 at 20:14
Do you expect these two to be any different in importance: `a > c`, `c > a`? — Anonymous, May 12 '15 at 20:20

Cayce K · Accepted Answer · 2015-05-12T20:45:58.923

2

This is slightly tricky because you're not telling us what you're wanting to target. That is a big factor in all of this. Let's try to hit each case though...

a > b + a, a > b {color: red;}
a > a, a + b {color: brown;}
c > b, c > a > b {color: yellow;}
a > c {color: green;}
c > a {color: green;}

If we are targeting a.

If `a` is an immediate child of `a` AND immediately follows `b` `a` will be `red`
If `a` is only a child of `a` `a` will be brown
If `a` is only a child of `c` `a` will be green

Looking at this you can see that these are specific rules. If the html displayed:

<a>
 <c> <!-- green -->
  <a> <!-- green -->
   <b></b> <!-- yellow -->
   <a></a><!-- red -->
  </a>
  <b></b> <!-- yellow -->
 </c>
</a>

EDIT

The statement here seems to be wrong about being more specific. These selectors do not seem to add any value, but the order does help. The outcome has been proven by Stephen in the comments below.

The ONLY two worth noting is the element b immediately following a within c AND a after the first b. This element is YELLOW because c > b is after a + b if those rules were switched it would be BROWN. The a is red because the a > b + a is more specific than c > a.

Hopefully this clears it up and makes more sense.

edited May 12 '15 at 20:45

answered May 12 '15 at 20:28

Cayce K

2,288
1
22
35

Thanks for your dedication! It really helped me! :) – Simon L. May 12 '15 at 20:32
The fact that the sentences are longer when written out in English don't actually add any value to the specificity (I'm not sure you're implying this but it could come across as such). The color values you list in the HTML are correct, as your final paragraph rightfully points out the only two notable parts that override the lesser specific rules. – Stephan Muller May 12 '15 at 20:34
I'm looking at it and I think you're right. I might have gotten that specifity for this wrong. I will look into your document and edit my answer. – Cayce K May 12 '15 at 20:35
I replaced the `a` and `c` elements with existing, color-neutral (as per browser specifications) elements and this is the outcome, which validates your answer: http://jsfiddle.net/6p7ckqzm/5/. – Stephan Muller May 12 '15 at 20:44
@StephanMuller Thanks for pointing that information out. Going to +1 you cause you helped me figure out something I thought I knew pretty well. I was right for all, but 1 turns out so not horrible. – Cayce K May 12 '15 at 20:44
good man... good man.. I screwed up apparently so I'm glad you did it. Thank you for verifying I rolled it back to be up to date again. – Cayce K May 12 '15 at 20:45

score 2 · Answer 2 · answered May 12 '15 at 20:32

The sibling/descendant selectors + and > don't add any specificity. Try it for yourself by swapping the rules around, the last one always wins: http://jsfiddle.net/6p7ckqzm/

The comma doesn't add specificity to the selector as a whole, they are treated as two separate selectors that happen to be related to one set of style declarations.

As a result, the a > b + a part of the first rule and the c > a > b of the third are equally specific because they consist of three element selectors. They share a first place with a specificity of 3. All the others consist of two elements, which ties them at second place with a specificity of 2.

Here's some more info on how to calculate specificity: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

CSS rules order

2 Answers2