Do CSS combinators add specificity to a CSS selector?

The mdn article about CSS specificity states:

Universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)

However my experience is that combinators do have an effect, see this example:

div > p {
color: red;
}

p {
color: green;
}

<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>

So the above quote claims, that CSS combinators have no effect on specificity. If that quote is right, how is it meant then, as my code example shows the opposite?

1 Answer
1

The problem in your snippet is that you have two selectors(div > p) in the 1st rule and in the 2nd rule only one selector(p), therefore the 1st rule is more specific, so the article is correct.

div > p

p

See the snippet below using the same 2 selectors, but the 1st having a combinator >, as they have the same specificity the latter will apply due to cascading.

>

div > p {
color: red;
}

div p {
color: green;
}

<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>

You can see the specificity for div p, div > p and p below

div p

div > p

p

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.