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
HTML・CSS入門