В настоящее время нет способа выбрать родительский элемент в CSS.
Если бы был способ сделать это, он был бы в любой из текущих спецификаций селекторов CSS:
Тем временем вам придется прибегнуть к JavaScript, если вам нужно выбрать родительский элемент.
Selectors Level 4 Working Draft включает псевдокласс : has ()
, который работает так же, как реализация jQuery . По состоянию на 2019 год это все еще не поддерживается ни одним браузером .
Используя : has ()
, исходный вопрос можно решить следующим образом:
li:has(> a.active) { /* styles to apply to the li tag */ }
Я не думаю, что вы можете выбрать родителя только в CSS.
Но, поскольку у вас уже есть класс .active
, он было бы проще переместить этот класс в li
(вместо a
). Таким образом, вы можете получить доступ к li
и a
только через CSS.
В CSS 2 нет способа сделать это. Вы можете добавить класс в li
и сослаться на a
:
li.active > a {
property: value;
}
Насколько мне известно, в CSS 2 нет. CSS 3 имеет более надежные селекторы, но не во всех браузерах. Я не верю, что даже с улучшенными селекторами он выполнит именно то, что вы указали в своем примере.
Как упоминалось парой других, нет способа стилизовать родительский элемент (-ы) с помощью только CSS, но следующие работает с jQuery :
$("a.active").parents('li').css("property", "value");