1. ホーム
  2. css

[解決済み] 1つのルールで複数のクラスを持つ要素を対象とする

2022-06-03 17:11:51

質問

私は複数のクラスを持つ要素を持ついくつかの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);
}

どのように解決するのですか?

  • .border-blue.background { ... } は、両方のクラスが一緒に使われる場合のものです。

  • .border-blue, .background { ... } はどちらかのクラス用です。

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

参照 クリスの回答 をご覧ください。また W3 Docs の CSS Combinators も参照してください。