Существует ли селектор родителя в CSS?
Как мне выбрать элемент <li>, который является непосредственным родителем элемента ссылки?
В качестве примера, мой CSS будет выглядеть примерно так:
li < a.active {
property: value;
}
Очевидно, что есть способы сделать это с помощью JavaScript, но я надеюсь, что существует какой-то обходной путь, который можно использовать на чистом CSS Level 2.
Меню, которое я пытаюсь стилизовать, генерируется системой управления контентом, поэтому я не могу переместить активный элемент в <li> (если только я не изменю модуль создания меню, что я бы предпочел не делать).
4 ответ(ов)
Я не думаю, что вы можете выбрать родительский элемент только с помощью CSS.
Но поскольку у вас уже есть класс .active, будет проще перенести этот класс на элемент li (вместо a). Таким образом, вы сможете обращаться как к li, так и к a с помощью CSS.
В CSS 2 нет возможности сделать это напрямую. Вы можете добавить класс к элементу li и обратиться к элементу a следующим образом:
li.active > a {
свойство: значение;
}
Попробуйте изменить стиль элемента a на display: block, и затем используйте любой стиль, который вам нужен. Элемент a заполнит весь элемент li, и вы сможете настроить его внешний вид так, как вам нравится. Не забудьте установить padding для элемента li в 0.
li {
padding: 0;
overflow: hidden;
}
a {
display: block;
width: 100%;
color: ..., background: ..., border-radius: ..., и т.д.
}
a.active {
color: ..., background: ...
}
Эти изменения позволят вам более гибко управлять стилями ссылок внутри списка.
Это наиболее обсуждаемый аспект спецификации Selectors Level 4. С помощью этого селектор сможет стилизовать элемент в зависимости от его дочерних элементов, используя :has().
Например:
body:has(a:hover) {
background: red;
}
Этот код установит красный цвет фона, если пользователь наведет курсор на любую ссылку.
Какие символы допустимы в именах классов/селекторах CSS?
Существует ли селектор "предыдущий брат"?
Что означает селектор CSS "~" (тильда/кручёная)?
CSS-селектор для первого элемента с классом
Использование подстановочного знака * в CSS для классов