Есть ли родительский селектор CSS?

Как выбрать элемент <li>, который является прямым родителем элемента привязки?

Например, мой CSS мог бы выглядеть примерно так:

li < a.active {
    property: value;
}

Очевидно, Есть способы сделать это с помощью JavaScript, но я надеюсь, что существует какой-то обходной путь, который существует в CSS уровня 2.

Меню, которое я пытаюсь стилизовать, извергается CMS, поэтому я не могу переместить активный элемент в элемент <li> ... (если я не создаю тему модуля создания меню, который я бы предпочел не делать).

Есть идеи?

2912
задан Peter Mortensen 24 July 2019 в 22:14
поделиться

4 ответа

В настоящее время нет способа выбрать родительский элемент в CSS.

Если бы был способ сделать это, он был бы в любой из текущих спецификаций селекторов CSS:

Тем временем вам придется прибегнуть к JavaScript, если вам нужно выбрать родительский элемент.


Selectors Level 4 Working Draft включает псевдокласс : has () , который работает так же, как реализация jQuery . По состоянию на 2019 год это все еще не поддерживается ни одним браузером .

Используя : has () , исходный вопрос можно решить следующим образом:

li:has(> a.active) { /* styles to apply to the li tag */ }
2379
ответ дан 22 November 2019 в 19:47
поделиться

Я не думаю, что вы можете выбрать родителя только в CSS.

Но, поскольку у вас уже есть класс .active , он было бы проще переместить этот класс в li (вместо a ). Таким образом, вы можете получить доступ к li и a только через CSS.

147
ответ дан 22 November 2019 в 19:47
поделиться

В CSS 2 нет способа сделать это. Вы можете добавить класс в li и сослаться на a :

li.active > a {
    property: value;
}
53
ответ дан 22 November 2019 в 19:47
поделиться

Насколько мне известно, в CSS 2 нет. CSS 3 имеет более надежные селекторы, но не во всех браузерах. Я не верю, что даже с улучшенными селекторами он выполнит именно то, что вы указали в своем примере.

26
ответ дан 22 November 2019 в 19:47
поделиться
Другие вопросы по тегам:

Похожие вопросы: