web-dev-qa-db-ja.com

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>

これらを単一のルール内でターゲットにできますか？たとえば、次のように、動作しないことがわかっています。

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

.border-blue.background { ... }は、複数のクラスを持つ1つのアイテム用です。
.border-blue, .background { ... }は、それぞれ独自のクラスを持つ複数のアイテム用です。
.border-blue .background { ... }は、「。background」が「.border-blue」の子である1つのアイテム用です。

より詳細な説明については、 Chris 'answer を参照してください。

155
Vian Esterhuizen

私がやったように誰かがこれに出くわした場合に備えて、上記の2つのバリエーションは異なるユースケース用です。

以下：

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

blue-borderクラスまたはbackgroundクラスのいずれかを持つ要素にスタイルを追加する場合に使用します。例：

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

すべてに青い境界線と白い背景が適用されます。

ただし、受け入れられる答えは異なります。

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

これにより、両方のクラスを持つ要素にスタイルが適用されるため、この例では、両方のクラスを持つ<div>のみがスタイルを適用する必要があります（CSSを適切に解釈するブラウザーで）。

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

基本的にこのように考えると、コンマ区切りは1つのクラスOR別のクラスの要素に適用され、ドット区切りは1つのクラスAND別のクラスの要素に適用されます=。

167
Chris Graham