css - 親と同じクラスを持つ子のみを表示

Question

親だけが同じクラスを持っている場合に子を表示する方法はありますか? 質問の難しい部分は、親と子が自分のクラスを知らないことです。

<div class="red">  
    <div class="red">red</div>
    <div class="yellow">yellow</div>
    <div class="blue">blue</div>
</div>

この場合、親とその最初の子のみを表示したいと思います。しかし、親クラスを赤から黄色に変更すると、親とその 2 番目の子だけを表示したいと思います。

そのようなものを作成することは可能ですか？

Answer 1

クラスが事前にわかっている場合のみ...

div div { display: none; }

div.yellow .yellow,
div.blue .blue,
div.red .red { display: block; }