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?
No value. The universal selector ( * ) and the pseudo-class :where() and its parameters aren't counted when calculating the weight so their value is 0-0-0, but they do match elements. These selectors do not impact the specificity weight value.
ID selectors are highly specific. Descendant selectors such as p img and child selectors such as . panel > h2 are more specific than type selectors such as p , img , or h1 . Calculating exact specificity values seems tricky at first.
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
Specificity Rules include:CSS style applied by referencing external stylesheet has lowest precedence and is overridden by Internal and inline CSS. Internal CSS is overridden by inline CSS. Inline CSS has highest priority and overrides all other selectors.
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
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With