CSS: 属性セレクタを複数指定する方法
CSS で属性セレクタを指定すると、 その属性に対応した要素のみを取得することができます。 さらに、属性セレクタを複数指定することもできます。
属性セレクタを1つだけ指定するには次のように記述します。
div[lang="en"]{
color: red;
}
属性セレクタを複数指定するには、次のようにブラケット[]を複数記述します。
div[lang="en"][class="sample"]{
color: red;
}
属性セレクタを複数指定するサンプル
下のHTMLは、div 要素が2つあり、上の div 要素は lang="en"、class="sample" の2つの属性があります。
下の div 要素は lang="en" の1つの属性があります。
CSS で lang="en"、class="sample" の2つの属性をもつ div 要素のみを指定し、文字色を赤に設定しています。
<div lang="en" class="sample">red</div>
<div lang="en">black</div>
<style>
div[lang="en"][class="sample"]{
color: red;
}
</style>
表示結果: 上の div 要素の文字色のみが赤になります。
red
black