Does CSS direct decendant (>) not matter in selectivity?

Question

Given the following class declarations and code ...

.foo > a { color:green; } .bar a { color:red; } 

 <div class="bar"> <div class="foo"> <a href="#">SOME LINK</a> </div> </div> 

... I thought the link would be green, because although both declarations have a class (010) and an element (001), .foo has a direct descendant selector. But, alas, the link is red. Why?

Answer 1

There is no value for > for css specificity.

Both cases have a value of 11 for specificity:

 .foo > a { color:green; }/*specificity value is 11*/ .bar a { color:red; }/*specificity value is 11*/ 

---

In your case, you can use, like this, for more specifics:

 .bar .foo > a { color:green; }/*greater specificity value is 21*/ .foo a { color:red; }/*specificity value is 11*/ 

---

Ok, I'm going to add here how specificity works:

 Selector Specificity Specificity in large base inline-style 1 0 0 0 1000 id selector 0 1 0 0 100 class,pseudo,attribute selector 0 0 1 0 10 type selector and pseudo elements 0 0 0 1 1 

Answer 2

Combinators have no meaning in the specifics that only selectors have: id, class, tags, pseudo-elements, pseudo-classes, attribute selector.

Answer 3

You have two conflicting CSS rules. The direct descendant selector has the same specificity as the descendant selector, if I'm not mistaken, so the next rule will override the previously parsed rule, so if your rules are:

 .foo > a { color:green; } .bar a { color:red; } 

then the color will be red. If your rules:

 .bar a { color:red; } .foo > a { color:green; } 

then the color will be green for any anchors that fulfill the selector of both rules.