css - CSS兄弟セレクター（すべての兄弟を選択）

Question

通常、私はCSSが得意ですが、これを理解できないようです。私がの構造を持っている場合

<div>
    <h2 class="open">1</h2>
    <h2>2</h2>
    <h2>3</h2>
    <h2>4</h2>
    <h2>5</h2>
</div>

.openCSSのクラスを使用してすべての兄弟h2をターゲットにするにはどうすればよいですか？私の主な問題は、兄弟セレクター（.open + h2）が。の直後のh2のみをターゲットにすること.openです。

score 102 · Accepted Answer

~次の代わりにを使用して、次のすべての兄弟を選択できます+。

.open ~ h2

先行するか後続するかh2ではないすべての要素を選択する必要がある場合、そのための兄弟コンビネータはありません。代わりに使用する必要があります：.open.open:not()

h2:not(.open)

div選択を親に制限する必要がある場合は、オプションで子コンビネータを使用します。

div > h2:not(.open)

score 2 · Accepted Answer

これがあなたの質問に対する直接的な答えではないことはわかっていますが、親のすべての子を選択し、開いているものに一意のクラスを指定するだけで、兄弟を選択する方がはるかに効率的な方法であることがわかりました。そこに。したがって、コードは次のようになります。

div h2 { } // apply the style for all "siblings" but really children
div h2.open { } // apply the style or cancel styles from the siblings

これは私にとってはうまく機能し、新しい css ルールや特別なものは必要ありません。

2 に答える 2