【属性セレクタE[foo="bar"]】指定の属性値を持つ要素に適用

要素名[属性名="属性値"]の形式の属性セレクタでは、指定した属性と属性値を持つ要素に対してスタイルを適用することができます。 例えばp[class="sample"]{}と指定した場合であれば、「class="sample"」が指定されているp要素に対してのみスタイルが適用されます。

このように要素名[属性名="属性値"]の形式の属性セレクタ(E[foo="bar"])では、[属性名="属性値"]で示した通りの属性と値とが完全に一致している、その要素に対してスタイルが適用されます。

※このE[foo="bar"]の指定方法の場合は、「値全体」が完全に一致していなければスタイルは適用されませんのでご注意下さい。

また要素名[属性名="属性値"][属性名="属性値"]というように、複数指定することもできます。 この場合両方とも完全に一致している要素にのみ適用されます。

書式

  • 要素名[属性名="属性値"] {プロパティ名:値;} ……… 指定した属性と属性値を持つ要素にスタイルを適用

使用した時の例

a[target="_blank"] {color: red;}
a[target="_blank"][href="/hp-web/css/"] {background: blue;}
<a href="https://www.yuu-diaryblog.com/">ホーム</a><br />
<a href="/hp-web/html-taglist/" target="_blank">HTMLリファレンス</a>
<a href="/hp-web/css/" target="_blank">cssリファレンス</a>

ブラウザ上の表示例

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

適用対象 指定した属性と属性値を持つ指定の要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報