a要素のhreflang属性を利用して、リンク先の言語毎に背景色を変える例。

ここはhreflang属性の値が"en"になっているa要素です。

ここはhreflang属性の値が"en-US"になっているa要素です。

ここはhreflang属性の値が"zh-tw"になっているa要素です。

言語関連以外でも使えます。p[class|="sample"]とした場合の例。

ここはclass="sample"

ここはclass="sample-style1"

ここはclass="samplestyle1"

ここはclass="sample-style1 sample-style2"

このサンプルのCSS

a[hreflang|="en"] {
	background:#cfc; /* 背景色・うすい緑 */
	}
a[hreflang|="zh"] {
	background:#fcc; /* 背景色・ピンク */
	}
    
p[class|="sample"] {
	background:#fc6; /* 背景色・オレンジ */
	}

このサンプルのHTML

<p><a href="#" hreflang="en">ここはhreflang属性の値が&quot;en&quot;になっているa要素です。</a></p>
<p><a href="#" hreflang="en-US">ここはhreflang属性の値が&quot;en-US&quot;になっているa要素です。</a></p>
<p><a href="#" hreflang="zh-tw">ここはhreflang属性の値が&quot;zh-tw&quot;になっているa要素です。</a></p>

<p class="sample">ここはclass="sample"</p>
<p class="sample-style1">ここはclass="sample-style1"</p>
<p class="samplestyle1">ここはclass="samplestyle1"</p>
<p class="sample-style1 sample-style2">ここはclass="sample-style1 sample-style2"</p>