【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

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト