top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Which of the following two selectors has a higher CSS specificity?

0 votes
551 views

Selector 1:

#object h2::first-letter

Selector 2:

body .item div h2::first-letter:hover
posted Jun 20, 2017 by Abdul Sukoor

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

Selector 1 has a higher CSS specificity
#object h2:first-letter
The specificity value of Selector 1 is 102. The specificity value of Selector 2 is 24.

Calculating a selector's specificity:-
-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
-Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.
-Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

With your examples we have:-
1) #object h2:: has a specificity of 1,0,2 (1 id, 2 type)
2) body .item div h2::first-letter:hover has a specificity of 0,2,4 (2 class, 4 type)

To obtain the value of the specificity you have to concatenate the 3 numbers. So for example, the first selector is more specific 102>24 than the other so, selector 1 has a higher CSS specificity.

answer Jun 21, 2017 by Anirudha Sarkar
...