2022.2

l
Amorespecific,andthereforemoreimportantrule,isencounteredforthesameelement.See
"UsingamorespecificCSSrule"belowtolearnmoreaboutthespecificityofstylerules.
l
Arulewiththesameimportanceisreadafterthefirstrule.Notonlyistheorderoftherulesina
CSSfileimportant,butalsotheorderinwhichthestylesheetsareread.Thestylesheetsthatare
includedwithasectionarereadinthespecifiedorder;see"Applyingastylesheettoasection"
onpage113.
UsingamorespecificCSSrule
Bydefault,manyCSSpropertiesofanHTMLelementalsoapplytotheelementsinsidethatelement.
Forexample,aCSSrulethatspecifiesacertainfont-typeforaboxalsoappliestoparagraphsinthat
box.Inthisexampletheboxisthe'parent'elementandtheparagraphsarethe'child'elementsthat
inheritthefont-typepropertyofthebox.
Note: Althoughthebackgroundcolorpropertyseemstobeinherited,itisn't.Mostelementsare
transparent;thereforethebackgroundcoloroftheparentelementshinesthrough.
Toreplaceinheritedstyleproperties,youneedtoaddamorespecificCSSruleforthat(typeof)ele-
ment.Incaseofaconflictbetweenageneralruleandamorespecificrule,themorespecificrulewillbe
applied.
Thefollowingdiagramshowstheorderofspecificity.
RulesforHTMLelements(p,table,lietc.)aregeneralrules.Rulesforclasses,pseudoclasses,andele-
mentswithacertainattribute(.class,:hover,[target])aremorespecific.Rulesforelementswithacer-
tainIDareevenmorespecific.Themostspecificareinlinestyles.
Example
AssumingthatatablehastheCSSproperty"color:red"(whichcolorstextinthecellsred),amorespe-
cificruleforcellsinthattablecouldbe,forexample:
Page 269