Figure 1.7. The ~ combinator targets sibling elements, regardless of whether they’re adjacent
Usingthegeneralsiblingcombinatoristhemosthandywhenyoulackfullcontrol
overthemarkup.Otherwise,you’dbebetteroffadjustingyourmarkuptoadda
classname.Keepinmindthatthegeneralsiblingcombinatormaycreatesomeun-
intendedsideeffectsinalargecodebase,sousewithcare.
Attribute Selectors
Attributeselectorsmatchelementsbasedontheirattributes.Thiscanbeanattribute
alone,suchas[type],oritcanbeanattributeandvaluecombination,suchas
[type=checkbox]or[for="email"].
Wecanalsodoattributepresenceandsubstringmatchingwithattributeselectors.
Forexample,wecanmatchattributevaluesinaspace-separatedlist,orwecan
matchattributevaluesthatstartwithtel:.Wecanevenmatchhyphenatedattribute
valuessuchasen-US.
12 CSS Master