【属性セレクタE[hreflang|="en"]】指定の文字列の要素に適用

要素名[属性名|="属性値"]の形式の属性セレクタ(E[hreflang|="en"])では、要素の属性の値がハイフン「-」区切りで複数含まれていて、そのうちの1つが「属性名」で指定した値(属性値)の文字列で始まっている場合にスタイルを適用することができます。

この属性セレクタは主に言語コード(en、en-USなど)などで使用されます。 例えば*[lang|="en"]{}と指定した場合であれば、「en」「en-US」「en-cockney」などを値とするlang属性を持つ要素にスタイルが適用されます。

このようにE[hreflang|="en"]の属性セレクタでは、ハイフン「-」の前が一致していればスタイルが適用されるため、lang属性やhreflang属性以外でも使用することができます。

※一般的にはlang属性で指定した言語をセレクタとする場合に使用される

繰り返しますがこの属性セレクタでは、属性と属性値の両方を指定していますが、属性値は完全に一致する必要はなく、HTML文書で指定しているハイフン「-」で区切られた値の先頭の文字列と一致するだけで適用されます。

書式

  • 要素名[属性名|="属性値"] {プロパティ名:値;} ……… 属性値が指定の文字列で始まる要素に対して適用

使用した時の例

p[lang|="en"] {
  font-family: 'Times New Roman', serif;
  color: red;
}
p[class|="sample"] {
  color: blue;
  text-decoration: underline;
}
<p lang="en">[en]The lang attribute is en</p>
<p lang="en-US">[en-US]The lang attribute is en-US</p>

<p class="sample">[sample]テキストテキスト</p>
<p class="sample-11">[sample-11]テキストテキスト</p>
<p class="sample22">[sample22]テキストテキスト</p>

ブラウザ上の表示例

[en]The lang attribute is en

[en-US]The lang attribute is en-US

[sample]テキストテキスト

[sample-11]テキストテキスト

[sample22]テキストテキスト

対応ブラウザなどのデータ

適用対象 指定の文字列で始まる属性値を持つ要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報