パターンE[hreflang|="en"]の属性セレクタは、ある要素の属性の値がハイフン（-）区切りでハイフン（-）の前が完全一致した場合にスタイルが適用されます。

主な用途は、言語のサブコードとの一致ですが、言語の一致（lang属性）としても同様に扱えます。
また、本来の用途とは違っていても、ハイフンの前が一致していれば適用されるため、リンク先の言語を示すhreflang属性や言語を示すlang属性以外でも使用できます。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

属性セレクタのサンプル

a[hreflang|="en"],
p[lang|="en"] {
  font-family: Georgia, David, serif;
  font-size: 150%;
}

p[class|="attribute"] {
  color: green;
}

<p lang="en">(en)The following selector represents an a element for</p>
<p lang="en-US">(en-US)The following selector represents an a element for</p>

<ul>
<li><a href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">
6.3.1. Attribute presence and value selectors
</a></li>
<li><a hreflang="en" href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">
6.3.1. Attribute presence and value selectors
</a></li>
</ul>

<p class="attribute">テキスト（attribute）</p>
<p class="attribute-sample">テキスト（attribute-sample）</p>
<p class="attributeSample">テキスト（attributeSample）</p>

最初の、lang="en"は完全一致で適用され、lang="en-US"は、ハイフンの前が完全一致しているため適用されます。
リストのリンクは、hreflang属性の値がenの場合に適用されるため、指定が無い一つ目のリンクには適用されません。

最後の、クラス属性による指定もハイフンの前が一致していると使えます。このパターンE[lang|="en"]は、言語のサブコード一致が主な目的ですが、このような使い方も可能です。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

(en)The following selector represents an a element for

(en-US)The following selector represents an a element for

• 6.3.1. Attribute presence and value selectors
• 6.3.1. Attribute presence and value selectors

テキスト（attribute）

テキスト（attribute-sample）

テキスト（attributeSample）

当たり前のようにIE6で見ても何の変化も有りません。