aspecificityof0,2,0.Butusingasimpletypeorelementselectorsuchash1orp
onlygivesusaspecificityof0,0,1.
Calculating Specificity
KeeganStreet’sSpecificityCalculator^22 andJoshuaPeek’sCSSExplain^23 are
helpfulforlearningaboutandcalculatingselectorspecificity.Complexandcombinatorselectors,ofcourse,giveushigherspecificityvalues.Let’s
lookatanexample.ConsiderthefollowingCSS:
ul#story-list > .book-review {
color: #0c0;
}#story-list > .book-review {
color: #f60;
}Thesetworulesetsaresimilar,buttheyarenotthesame.Thefirstselector,
ul#story-list > .bookreview,containsatypeselector(ul),anIDselector,(#story-
list),andaclassselector(.bookreview).Ithasaspecificityvalueof1,1,1.The
secondselector,#story-list > .book-reviewonlycontainsanIDandaclassse-
lector.Itsspecificityvalueis1,1,0.Eventhoughour#story-list > .book-review
rulesucceedsul#story-list > .bookreview,thehigherspecificityoftheformer
meansthatthoseelementswitha.book-reviewclasswillbegreenratherthanor-
ange.
Pseudo-classessuchas:linkor:invalidhavethesamelevelofspecificityasclass
selectors.Botha:linkanda.externalhaveaspecificityvalueof0,1,1.Similarly,
pseudo-elementssuchas::beforeand::afterareasspecificastypeorelement
selectors.Incaseswheretwoselectorsareequallyspecific,thecascadekicksin.
Here’sanexample:
(^22) http://specificity.keegan.st/
(^23) http://josh.github.io/css-explain/
Selectors 69