Atfirstglance,thismayseemlikeauselessselector;however,it’squitepractical
forworkingwithlanguagesandlanguagecodes—suchasen-USores-MX—which
isitsintendeduse.
Let’ssaywehaveasitetargetingEnglishspeakers.Oursitealsosupportstwore-
gionalvariationsinEnglish:UnitedKingdomandUnitedStates.Thelanguagecodes
fortheselanguagesareen-GBanden-USrespectively.We’vealsosetthelanguage
onourhtmltag;forexample,.
OursiteteachesEnglishspeakerstobeconversantinFrench,Spanish,andPor-
tuguese.Itcontainslotsofmarkupsimilartothisexample:
<p lang="fr-FR"><q>Tout le monde.</q></p>
<p><q>All the world.</q>, or <q>Everyone</q></p>Let’sitalicizeourFrenchtextandaddlanguage-appropriateanglequotes(«and»)
toeithersideofit:
[lang|="fr"] {
font-style: italic;
}
[lang|="fr"] q:before{
content: '\00AB'; /* Left angle quote */
}
[lang|="fr"] q:after{
content: '\00BB'; /* Right angle quote */
}What’scoolaboutthisselectoristhatitwillalsomatchiftheattributeequalsthe
prefix.Thesestyleswouldalsoapplyto
.Wecouldfurtherlimitthe
scopeoftheseselectors,forexample,byaddingapelementtothelangattribute:
p[lang|="fr"].
Thoughintendedtobeusedwithlanguagecodes,thisselectorisn’tlimitedtothem.
Wecanuseitwithanyhyphenatedattributevalue.Considerthefollowingmarkup:
<article class="articlepromo">
<h3>U.S. ratifies Kyoto Protocol</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p>
</article>Selectors 15