Selectors specificity

MDN Learn
#1 
:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}

Where is the class selector, in the above statement?
I see only type which is input, having specificity 0 0 1, so some one please explain me the class specificity [the middle value in 0-1-1].

#2

Hi @vaishnavi_A.N

Not only classes go into the CLASS column and :root is a pseudo-class.

CLASS column
Includes class selectors, such as .myClass , attribute selectors like [type="radio"] and [lang|="fr"] , and pseudo-classes, such as :hover , :nth-of-type(3n) , and :required . For each class, attribute selector, or pseudo-class in a matching selector, add 0-1-0 to the weight value.

See you,
Michael

1 Like
#3

Thanks @mikoMK , I did not know about the :root pseudo class.

1 Like