Do CSS combinators add specificity to a CSS selector?

Question

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?

possible duplicate of : stackoverflow.com/questions/2809024/points-in-css-specificity — Temani Afif
– Temani Afif, Commented Jul 1, 2018 at 19:11
could be except they never mention the combinators AFAIK therefore this dupe wouldn't cover this question — dippas
– dippas, Commented Jul 1, 2018 at 19:56

dippas · Accepted Answer · 2018-07-01 17:41:11Z

3

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.

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

edited Jul 1, 2018 at 17:41

answered Jul 1, 2018 at 17:31

dippas

60.8k15 gold badges125 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MarvHock Over a year ago

Assuming "CSS selector" and "CSS rule" being the exact same, your answer might bring some confusion. However, knowing that the specificity of above rule/selector is actually defined by counting the amount of "simple selectors", helped a lot to understand. So the combinators are just not counted to the specificity declaring number. Your answer gave the crucial hint which lead me to the helpful W3C page: w3.org/TR/2018/CR-selectors-3-20180130/#specificity

dippas Over a year ago

CSS rule is different than the CSS selector.. a css selector is what you choose to style.. The CSS rule is what you style (including the selector) -selector and properties

BoltClock Over a year ago

Also see why combinators don't add specificity.

Collectives™ on Stack Overflow

Do CSS combinators add specificity to a CSS selector?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related