html - 同じクラス タグの CSS ネスト規則

Question

私は 2 つの CSS スタイルを持っています。2 番目のスタイルは、最初のスタイルが存在する場合にのみ有効にしたいと考えています。どうすればそれについて行くでしょうか？クラスタグに複数のクラスを追加できることは知っていますが、css タグを同じようにネストするのはうまくいかないようです。

.stat{float: left; width: 200px; height: 40px; padding: 5px; margin: 5px; border: 1px solid #000;}
.stat .red{background-color: #c00;}


<!-- This should have the background color -->
<div class="stat red">

<!-- This should not have the background color -->
<div class="red">

<!-- This should not have the background color -->
<div class="stat">

Answer 1

スペースを省略してください:

.stat.red{background-color: #c00;}

Answer 2

明確にするために

.stat .red { ... }

より正確には、クラス名の間の " " は、子孫セレクターと呼ばれます。あなたの場合は、クラス「stat」の要素の子孫であるクラス「red」の要素のみが対象となることを意味します。例えば

<div class="stat">
   <div class="red"></div>
</div>