Which CSS pseudo-classes don't have specificity?

Question

I'm studying a bit of CSS and from reading there are some pseudo-classes that don't have specificity like where() and not(). Are there more?

Mcallister

Answer 1

If you check the specification you can find the full detail of specificity calculation. I am going to refer to CSS selectors level 4 that include all the new selectors:

A selector’s specificity is calculated for a given element as follows:

• count the number of ID selectors in the selector (= A)
• count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
• count the number of type selectors and pseudo-elements in the selector (= C)
• ignore the universal selector

If the selector is a selector list, this number is calculated for each selector in the list. For a given matching process against the list, the specificity in effect is that of the most specific selector in the list that matches.

A few pseudo-classes provide “evaluation contexts” for other selectors, and so have their specificity defined specially:

The specificity of an :is(), :not(), or :has() pseudo-class is replaced by the specificity of the most specific complex selector in its selector list argument.

Analogously, the specificity of an :nth-child() or :nth-last-child() selector is the specificity of the pseudo class itself (counting as one pseudo-class selector) plus the specificity of the most specific complex selector in its selector list argument (if any).

The specificity of a :where() pseudo-class is replaced by zero.

So basically, the * never counts and it's the same for :where(). You can also read that:

neither the :where pseudo-class, nor any of its arguments contribute to the specificity of the selector—its specificity is always zero. ^ref

For :is(), :not() and :has() you consider what is inside. This means that the following selector have the same speficity:

a:not(.class) == a.class
a:not(#id):is(.class) == a#id.class

But pay attention to the sentence: is replaced by the specificity of the most specific complex selector in its selector list argument. In the near future we can write something like :

a:not(.class, #id)

and its specificity is equal to

a#id

and not to

a.class#id

---

Considering this, only :where() doesn't have any specificity or, to use better words, doesn't contribute to the specificity calculation. :not(), :is() and :has() do but only based on what they have inside, unlike :nth-child() where we count it in the B and we also count what it contains.

Note that in the future we can write something like below:

 a:nth-child(-n+3 of li.important)

Which have a specificty equal to 1 class selector (.important) + 1 pseudo class (:nth-child) + 2 type selector (a li)

Thriller

are we able to use :is() and :has() ? I was trying to use them but it wasent for me. – Mcallister

@Mcallister they still have no support yet, you cannot use them. I considered the new Specification that detail the actual and the future selector to make the answer generic but actually you only have the :not() selector that you can use – Thriller

What's up with :host's specificity? – Burgwell

@Burgwell drafts.csswg.org/css-scoping/#host-selector : The specificity of :host is that of a pseudo-class. The specificity of :host() is that of a pseudo-class, plus the specificity of its argument. – Thriller