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.
