CSS селектор, чтобы получить предыдущий брат

Question

Есть ли способ использовать чистый 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, Есть ли способ сделать это?

Answer 1

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

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

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

Answer 2

Было несколько предложений для CSSWG в списке рассылки [e-mail], как и в предыдущем комбинаторе: мой один (2012), другой 1,2 (2013).

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

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