css - 混合コンテナでクラスの最初の子/最後の子を選択するにはどうすればよいですか?

Question

さまざまなクラスの子を持つ div でクラスの最初と最後の子を選択できますか?

例えば：

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

    <div class="black"></div>
    <div class="black"></div>
    <div class="black"></div>

    <div class="green"></div>
    <div class="green"></div>
    <div class="green"></div>
</div>

の最初の子と最後の子を選択したい.black。それは可能ですか？

Answer 1

残念ながら、そうではありません。

ただし、2 つのセレクターを組み合わせることで、特定のクラスの最初の子を選択することができます ( example )。

div.black:first-child,
div:not(.black) + div.black

最初のセレクターは、明らかにその親の最初の子である黒い div を選択します。2 番目のセレクターは、黒以外の div が先行する黒の div を選択します。これら 2 つのルールを使用して、最初の黒い div を選択できます。

詳細については:first-child、 、:not、および隣接する兄弟セレクター ( +)を参照してください。