11

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 that the link would be green because, while both declarations have a class (010) and an element (001), .foo has the direct descendant selector. But alas, the link is red. Why?

web-tiki
  • 99,765
  • 32
  • 217
  • 249
oucil
  • 4,211
  • 2
  • 37
  • 53

3 Answers3

13

There's no value for > for css specificity.

Both case have 11 value for specificity:

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

In your case you may use like this to have greater specificty:

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

Ok, I'm going 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
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • 2
    It's not in base 10. It's in an arbitrarily large base. For example, 11 type selectors (or any number of them) still have less specificity than 1 class selector. – Oriol Nov 29 '14 at 14:43
  • Thanks Bhojendra, my assumption till now was that `>` was counted as a pseudo element, it's a little frustrating to find out that's not the case. Do you have any reference for why it isn't, it doesn't make much sense why it wouldn't be included in such a way? – oucil Nov 29 '14 at 14:47
  • Yes, I get that now, but it's not clear why. `:first-child` is a pseudo element, so why would `>` not be? Do you know of any explanation as to why this is the case? – oucil Nov 29 '14 at 14:49
  • Then what would you say to just dot or hash in the element?? Including the hash in the element is so-called id selector but not just to the hash, so in that way > is just used for combining, did you get me??? – Bhojendra Rauniyar Nov 29 '14 at 14:51
  • @oucil `>` is a combinator, not a pseudo-element. Pseudo-elements are fragments of elements which somewhat behave like elements. `>` just combines two selectors. – Oriol Nov 29 '14 at 14:51
  • This is a little incorrect. Specificity is calculated by concatenating the counts. The specs simply says *in a number system with a large base*. – Abhitalks Nov 29 '14 at 14:52
  • @Bhojendra, I would say those are part of an identifier, while > is always independent, and in my opinion is a more specific reference to an element than without it, would you not agree? I understand also that it's not exactly a pseudo-element, but I would have expected it to be grouped with them. I'm just curious whether this was ever part of the discussion when formulating the standard? – oucil Nov 29 '14 at 14:54
  • How can I make you clear, Please just understand that's not calculated for specificity anymore anyhow... – Bhojendra Rauniyar Nov 29 '14 at 14:55
  • @abhitalks, Bhojendra... You're both misunderstand my intent, I do understand fully that it is not included. But it never hurts to understand the reasoning behind these kinds of decisions in the development of the standard, I'm looking for reference material (if it exists) as to why it wasn't included. Logically, at least to me, using a direct decedent combinator seems more specific than the same without. – oucil Nov 29 '14 at 15:01
  • 2
    @oucil: Good question that. This is because a child-combinator and descendant-combinator are the same. A child-combinator can also be called a direct-descendant-combinator. A child-combinator is just a type of descendant-combinator. e.g. for `

    ab

    ` - `p span` is same as `p > span`. So, it is conflicting to do a precedence. Also, if there are nested elements, even then a child is also a descendant. Hence CSS specs have no notion of combinator precedence and relies on order in such cases.     – Abhitalks Nov 29 '14 at 15:28
  • @abhitalks now that makes more sense, thanks for clearing that up! – oucil Nov 29 '14 at 15:30
  • 1
    @oucil: By the way, `:first-child` is a pseudo-class, not a pseudo-element. In specificity, pseudo-classes are grouped with class selectors and pseudo-elements are grouped with type selectors. So it's important not to get the two mixed up. – BoltClock Nov 29 '14 at 16:46
  • @BoltClock Yeah, typo :) wouldn't have changed the context of the example where I used it but you're absolutely right. – oucil Nov 29 '14 at 16:49
  • @abhitalks One more thing I would point out, while the `>` would have been equal precedence in your example, it actually wouldn't (or shouldn't) in my original question, where two *different classes* are compared against each other, rather than two similar elements. Just food for thought ;) – oucil Nov 29 '14 at 16:52
  • @oucil: Even then it is conflicting. See it whichever way, the latter one conflicts with the previous class. Hence, the latter one will take precedence. – Abhitalks Nov 29 '14 at 16:56
  • @abhitalks Yep, according to the spec, that's correct. I'm saying the spec is stupid, and that `>` should have influence in that type of situation, where all other things being equal, a descendent selector logically is a more specific reference when deciding which class to apply. – oucil Nov 29 '14 at 16:59
1

You have two conflicting CSS rules. Direct descendant selector has the same specificity as descendant selector if I am not mistaken, therefore the rule parsed later will override the formerly parsed rule, so if your rules are:

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

then the color will be red. If your rules are:

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

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

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
1

Combinators don't have any value in specificity only selectors have :id, class, tags , pseudo elements , pseudo classes, attribute selectors.

marius
  • 11
  • 1