CSS sibling selectors (выберите всех братьев и сестер)

Обычно, я хорошо разбираюсь в CSS, но, похоже, я не могу это понять. Если у меня есть структура

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

как я могу настроить таргетинг на все дочерние узлы h2s, используя класс .open с CSS? Моя основная проблема заключается в том, что селекторные функции (.open + h2) будут нацелены только на h2 сразу после .open.

Ответы

Ответ 1

Вы можете выбрать всех следующих братьев и сестер, используя ~ вместо +:

.open ~ h2

Если вам нужно выбрать все h2 элементы, которые не являются .open, предшествуют ли они или следуют за .open, для этого нет синонимов. Вместо этого вам нужно использовать :not():

h2:not(.open)

Необязательно с детским комбинатором, если вам нужно ограничить выделение div родителями:

div > h2:not(.open)

Ответ 2

Я знаю, что это не прямой ответ на ваш вопрос, но я обнаружил, что это гораздо более эффективный способ выбора братьев и сестер, просто выбрав все дочерние элементы родителя и указав уникальный класс для открытого как у вас есть. Таким образом, код будет выглядеть следующим образом:

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

Это отлично работает для меня, и для этого не требуются новые правила CSS или что-то особенное.