Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which CSS pseudo-classes don't have specificity?

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?

like image 461
ghost2092000 Avatar asked Dec 16 '19 18:12

ghost2092000


People also ask

Which selector does not increase specificity?

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.

Are ID selectors highly specific?

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.

Which is not a CSS pseudo-class?

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.

Which one will have the lowest priority specificity in CSS?

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.


1 Answers

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)

like image 173
Temani Afif Avatar answered Oct 07 '22 19:10

Temani Afif