Search code examples
csscss-specificity

CSS rules order

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?

Solution

  • 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.