Селектор CSS для получения предыдущего брата

Можно ли использовать чистый CSS (3), чтобы выбрать элемент, являющийся предшествующим родством одного элемента с определенным классом?

то есть:.

HTML:

<div id='element-to-find'></div>
<div id='box1'></div>
<!-- a bunch more DOM elements between here --->
<div id='box2'>
      <div id='inner-box'></div>
</div>

CSS

#box1{ /*some styling*/ }
#box2{ /*some styling*/ }

#box2.active .....

Теперь, когда # box2 имеет класс active, я хочу выбрать и сделать что-то в стиле #element-to-find. Есть ли способ выполнить это?

Ответ 1

Не зная больше ваших селекторов, вы можете использовать селектор CSS: not().

div:not(#box1), div:not(#box2) {
    /*some style here*/
}

Я просто предлагаю дать вам класс #element-to-find, когда вы выберете box2 и у вас будет готовый стиль.

Ответ 2

В CSSWG было представлено несколько предложений в списке рассылки [email protected], как и в предыдущем сборнике: мой один (2012), еще 1, 2 (2013).

Общий ответ от Аткинса похож на "у нас уже есть индикатор для этого". Для выбора потомков предыдущего брата (что было бы тривиально с комбинатором предыдущих слов, например, .example - UL > LI), он предлагает использовать функциональный псевдокласс :matches(), например. :matches(!UL + .example) > LI. Оба объекта индикатора и :matches() в настоящее время находятся в черновом состоянии и еще не могут использоваться в реальном мире.

Итак, вы должны добавить обычный класс к элементу element-to-find или (что гораздо менее желательно, если ваш класс active добавлен не через JS) использует JavaScript для эмуляции функций предыдущего-брата-комбинатора.