CSSの属性セレクタ【現役エンジニアが解説】
今回は、CSSの属性セレクタについて、3パターンに分け、簡単に解説していきます。
ある属性を持つ要素
要素名[属性名]で指定すると、ある属性を持つ要素にスタイルを適用できます。
この指定の仕方では、あくまで属性を持っているかどうかのみで、値までは評価されません。
a[target]{
background-color:red;
}
上記のコードでは、target属性を持つa要素に対し、背景色を赤色にするというスタイルを適用しています。
ある属性が特定の値を持つ要素
要素名[属性名=”値”]では、ある属性が特定の値を持つ要素にスタイルを適用できます。
この方法では指定した属性の値とセレクタで指定する値が一致する要素にのみスタイルが適用されます。
a[href="https://google.com/"]{
background-color:green;
}
上記のコードでは、href属性の値がhttp://google.comのa要素に対し、背景色を緑色にするというスタイルを適用しています。
ある属性の値に特定の値が含まれる要素
要素名[属性名*=”値”]では、ある属性の値に特定の値が含まれる要素にスタイルを適用できます。
この指定方法では、指定した属性の値にセレクタで指定する値が含まれる要素にのみ、スタイルが適用されます。
a[href*="google.com"]{
background-color:gray;
}
上記のコードでは、href属性の値にgoogle.comという値が含まれるa要素に対し、背景色をグレー色にするというスタイルを適用しています。