There is something that puzzles me when writing CSS: combinators do not count when calculating the specificity.
Let's see the following code as an example:
At first glance, section > div looks more specific than section div as it targets a more precise set of elements (the divs that are direct children of section). So "Text 1" should be red, while "Text 2" should be blue.
...But when you run the code above, you see that that's not the case. All the text is blue. Even when section > div is intuitively more specific than section div, it is not more specific in CSS.
That is because the universal selector (*), combinators (+, >, ~, , ||), and negation pseudo-class (:not()) do not have any effect on specificity.
Both rules section > div and section div then have the same specificity (0-0-2), and the last one in the code takes precedence.
But why is that? Digging online, one can find this question on StackOverflow that leads to a 2004 W3C thread with a discussion about the topic in which they ended up discarding the possibility.
While that decision makes sense from a practical point of view: if combinators were given a specificity weight –even something lower than a tag–, that change could unexpectedly affect the styling of millions of websites.
We could argue that it was not the right time to make such a change, but we could also argue that it won't be the right time ever. Even when, in my opinion, it is a change that should be done.
Because it makes sense from a semantic point of view: combinators add meaning and precision (therefore specificity) to a selector. From the example above, section > div will always be a subset of section div. It is more specific.
...Just not for CSS.
Top comments (0)