Можно ли использовать чистый 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. Есть ли способ выполнить это?
Не зная больше ваших селекторов, вы можете использовать селектор CSS: not().
div:not(#box1), div:not(#box2) {
/*some style here*/
}
Я просто предлагаю дать вам класс #element-to-find, когда вы выберете box2 и у вас будет готовый стиль.
В CSSWG было представлено несколько предложений в списке рассылки [email protected], как и в предыдущем сборнике: мой один (2012), еще 1, 2 (2013).
Общий ответ от Аткинса похож на "у нас уже есть индикатор для этого". Для выбора потомков предыдущего брата (что было бы тривиально с комбинатором предыдущих слов, например, .example - UL > LI), он предлагает использовать функциональный псевдокласс :matches(), например. :matches(!UL + .example) > LI. Оба объекта индикатора и :matches() в настоящее время находятся в черновом состоянии и еще не могут использоваться в реальном мире.
Итак, вы должны добавить обычный класс к элементу element-to-find или (что гораздо менее желательно, если ваш класс active добавлен не через JS) использует JavaScript для эмуляции функций предыдущего-брата-комбинатора.