CSS Master

Optionalfieldswithemptyvaluesarevalidbydefault.Obviously,ifuserinput

satisfiestheconstraintsofthefield,itexistsinavalidstate.

Formcontrolscanhavemultiplestatesatonce.Soyoumayfindyourselfmanaging

specificity(discussedinthenextsection)andcascadeconflicts.Awaytomitigate

thisisbylimitingwhichpseudo-classesyouuseinyourprojects.Forexample,

don’tbotherdefiningan :optionalrulesetifyou’llalsodefinea:validruleset.

It’salsopossible,however,tochainpseudo-classes.Forexample,wecanmixthe

:focusand:invalidpseudo-classestostyleanelementonlywhileithasfocus:

input:focus:invalid.Bychainingpseudo-classes,wecanstyleanelementthat

hasmorethanonestate.

Selectors and Specificity

Thinkofspecificityasascoreorrankthatdetermineswhichstyledeclarationsare

ultimatelyappliedtoanelement.Theuniversalselector(*)haslowspecificity.ID

selectorsarehighlyspecific.Descendantselectorssuchasp imgandchildselectors

suchas.panel > h2aremorespecificthantypeselectorssuchasp,img,orh1.

Calculatingexactspecificityvaluesseemstrickyatfirst.AsexplainedinSelectors

Level3,^21 youneedto:

■ countthenumberofIDselectorsintheselector(=A)

■ countthenumberofclassselectors,attributeselectors,and

pseudo-classesintheselector(=B)

■ countthenumberoftypeselectorsandpseudo-elementsinthe

selector(=C)

■ ignoretheuniversalselector

TheseA,B,andCvaluesarethencombinedtoformafinalspecificityvalue.AnID

selectorsuchas#foohasaspecificityof1,0,0.Attributeselectors,suchas

[type=email]andclassselectorssuchas.charthaveaspecificityof0,1,0.Adding

apseudo-classsuchas:first-child(forexample,.chart:first-child)givesus

(^21) http://dev.w3.org/csswg/selectors-3/#specificity
68 CSS Master