CSS Master

a:link {

color: #369;

}

a.external {

color: #f60;

}

IfweappliedthisCSS,everylinkwouldbeslateblueexceptforthosewith

class="external"applied.Thoselinkswouldbeorangeinstead.

Keepingspecificitylowhelpspreventselectorcreep,orthetendencyforselector

specificityandlengthtoincreaseovertime.Thisoftenhappensasyouaddnew

developerstoateam,ornewformsofcontenttoawebsite.Selectorcreepalso

contributestolong-termmaintenanceheadaches.Youeitherendupusingmore

specificselectorstooverrideotherrulesets,orneedingtorefactoryourcode.Longer

selectorsalsoincreasetheweightofyourCSSfiles.

WediscussstrategiesforkeepingspecificitylowinChapter 2.

Conclusion

Afterreadingthischapter,youshouldhaveagoodunderstandingofCSSselectors.

Specifically,youshouldnowknowhowto:

■ useselectorstoapplyCSStoparticularelements,pseudo-elements,andpseudo-

classes

■ understandthedifferencebetweenpseudo-elementsandpseudo-classes

■ employnewerpseudo-classesintroducedbytheSelectorsLevel 3 and 4 specific-

ations

■ calculatespecificity

Inthenextchapter,we’lladdresssomegoldenrulesforwritingmaintainable,

scalableCSS.

70 CSS Master