Someoftheattributeselectorswe’llcoverhereareoldhat.Boththehyphenated
attributevalueselectorandthespace-separatedattributevalueselectorweredefined
inCSS2.SelectorsLevel3,ontheotherhand,addsafewpowerfulselectorsthat
letusmatchpartialattributevalues.
We’llfocusonthenewandlesser-knownattributeselectorsinthissection.Let’s
takealook.
Matching Attribute Presence
It’scommontomatchelementsbasedontheexactvalueoftheirattributes.Reset
stylesheetscommonlyuseselectorsselectorsuchas[type=text]and[type=email].
Butwecanalsomatchattributeswhentherearemultiplespace-separatedvalues.
Weneedtouseourspace-separatedattributevalueselector:[att~=val].
Thespace-separatedattributevalueselectormatcheselementswiththeattribute
attandalistofvalues,oneofwhichisval.Thiscanbeanyattributethataccepts
space-separatedvalues,includingclassordata-*.
Space-separatedlistsofattributesareadmittedlyuncommon.Theyaresometimes
usedwiththerelattributeandmicroformats^5 todescriberelationshipsbetween
peopleanddocuments.Wemightmarkupanexternallinklikeso:
<a href="http://example.com/" rel="external friend">Bob</a>Wecanthenusethispresence-basedattributeselectortomatchthislinkandlinks
likeit:
01-selectors/attribute-space-separated.html (excerpt)
[rel~=friend] {
font-size: 2em;
background: #eee;
padding: 4px;
text-decoration: none;
border-bottom: 3px solid #ccc;
}
[rel~=friend]:link,
[rel~=friend]:visited {(^5) http://microformats.org/wiki/existing-rel-values
Selectors 13