[href$="5555"] {
background: #e91e63;
}It’smoreuseful,obviously,tomatchelementsthatendwiththesamesuffix.For
example,youcouldmatchboth
Using$=won’t,however,matchanelementwiththeclassnamesports-sidebar-
a.Forthatwe’dneedtousethe=sequence.Changingourselectorto
[class=sidebar]doesthejob.
MostofthenewselectorsaddedinCSS3andCSS4arenotattributeselectorsatall.
They’repseudo-classesorpseudo-elements.We’lldiscusstheseoverthenextfew
sections.
Pseudo-classes versus Pseudo-elements
Thoughyou’veprobablyusedpseudo-classesandpseudo-elementsinyourcode,
youmaynothavethoughtaboutwhattheyareorthedifferencebetweenthem.
Pseudo-classesletusstyleobjectsbasedoninformationdistinctfromthedocument
tree,orthat’sunabletobeexpressedusingsimpleselectors.Forexample,anelement
canonlyhaveahoverorfocusstateoncetheuserinteractswithit.Withthe:hover
and:focuspseudo-classes,wecandefinestylesforthosestates.Otherwise,we’d
havetorelyonscriptingtoaddandremoveclassnames.
Pseudo-elements,ontheotherhand,letusstyleelementsthataren’tdirectlypresent
inthedocumenttree.There'snofirstletterelementinHTML,soweneedanother
waytoselectit.The::first-letterpseudo-elementgivesusthatcapability.
Pseudo-elements
TheCSSPseudo-elementsModuleLevel 4 specification^6 clarifiesbehaviorforex-
istingpseudo-elementsanddefinesseveralnewones.Onlyafew,however,have
anydegreeofsupportincurrentbrowsers.Thosearetheoneswe’llfocusonhere:
(^6) http://dev.w3.org/csswg/css-pseudo-4/
Selectors 19