☰

2つのクラスを持つ要素に適用されるCSSセレクター 質問する

tag-icon • tag-icon css css-selectors
2つのクラスを持つ要素に適用されるCSSセレクター 質問する

2 つの特定のクラスに設定されているクラス属性の値に基づいて、CSS で要素を選択する方法はありますか。たとえば、3 つの div があるとします。

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

リスト内の 2 番目の要素が foo クラスと bar クラスの両方のメンバーであるという事実に基づいて、その要素のみを選択するには、どのような CSS を記述すればよいでしょうか?

ベストアンサー1

両方のクラスセレクターを連結します（間にスペースを入れないでください）。

.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

Internet Explorer 6 などの古いブラウザーをまだ使用する必要がある場合は、連鎖クラス セレクターが正しく読み取られないことに注意してください。他のクラスがリストされているかどうかに関係なく、最後のクラス セレクター (.barこの場合は) のみが読み取られます。

他のブラウザと IE6 がこれをどのように解釈するかを説明するために、次のスニペットを検討してください。

* {
  color: black;
}

.foo.bar {
  color: red;
}
<div class="foo">1. Hello Foo</div>
<div class="foo bar">2. Hello World</div>
<div class="bar">3. Hello Bar</div>

ページは次のようになります:

  • サポートされているブラウザの場合:

    1. この要素にはクラス のみがあるため選択されませんfoo。
    2. この要素にはクラスfooとの両方があるため選択されましたbar。
    3. この要素にはクラス のみがあるため選択されませんbar。

  • Internet Explorer 6の場合:

    1. この要素にはクラスがないため選択されませんbar。
    2. barリストされている他のクラスに関係なく、この要素にはクラスがあるため選択されます。
    3. この要素にはクラスがあるため選択されましたbar。

おすすめ記事