☰

1つのルール内で複数のクラスを持つ要素をターゲットにする 質問する

tag-icon • tag-icon css class css-selectors
1つのルール内で複数のクラスを持つ要素をターゲットにする 質問する

複数のクラスを持つ要素を持つ HTML があり、同じクラスが異なるコンテナー内で異なる可能性があるように、それらを 1 つのルール内に割り当てる必要があります。CSS に次のコードがあるとします。

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

次に、HTML に次の内容を追加します。

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

これらを 1 つのルール内でターゲットにすることはできますか? たとえば、これは機能しないことはわかっていますが、次のようになります。

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}

ベストアンサー1

.border-blue.background { ... }両方のクラスを一緒に使用する場合です。

最初のものだけをターゲットにする

<div class="border-blue background"></div>
<div class="border-blue"></div>
<div class="background"></div>

.border-blue, .background { ... }どちらのクラスにも適用されます。

両方をターゲットとする

<div class="border-blue"></div>
<div class="background"></div>

.border-blue .background { ... }'.background' が '.border-blue' の子である場合です。

2番目の「.background」要素のみをターゲットとする

<div class="border-red">
    <div class="background"></div>
</div>
<div class="border-blue">
    <div class="background"></div>
</div>

見るクリスの答えより詳しい説明については、W3 ドキュメントCSSコンビネータについて

おすすめ記事