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


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

В примере мой CSS будет примерно таким:

li < a.active {
    property: value;
}

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

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

Есть идеи?


2463


источник


Ответы:


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

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

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


Селекторы Уровень 4 Рабочий проект включает :has()псевдокласс, который работает так же, как и реализация jQuery , По состоянию на июнь 2018 года, это все равно не поддерживается никаким браузером ,

С помощью :has()исходный вопрос можно решить с помощью этого:

li:has(> a.active) { /* styles to apply to the li tag */ }

1974



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

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


115



Вы можете использовать это скрипт ,

*! > input[type=text] { background: #000; }

Это позволит выбрать любого родителя текстового ввода. Но подождите, еще многое. Если вы хотите, вы можете выбрать указанного родителя:

.input-wrap! > input[type=text] { background: #000; }

или выберите его, когда он активен:

.input-wrap! > input[type=text]:focus { background: #000; }

Посмотрите этот HTML:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

вы можете выбрать, что span.helpкогда inputактивен и показывает это:

.input-wrap! .help > input[type=text]:focus { display: block; }

Есть еще много возможностей; просто ознакомьтесь с документацией плагина.

BTW, он работает в IE.


95



As mentioned by a couple of others, there isn't a way to style an element's parent/s using just CSS but the following works with jQuery:

$("a.active").parents('li').css("property", "value");

70



There is no parent selector; just the way there is no previous sibling selector. One good reason for not having these selectors is because the browser has to traverse through all children of an element to determine whether or not a class should be applied. For example if you wrote:

body:contains-selector(a.active) { background: red; }

Then the browser will have to wait until it has loaded and parsed everything until the </body> to determine if the page should be red or not.

This article Why we don't have a parent selector explains it in detail.


42



there isn't a way to do this in css2. you could add the class to the li and reference the a

li.active > a {
    property: value;
}

38



The CSS selector “General Sibling Combinator” could maybe used for what you want:

E ~ F {
    property: value;
}

This matches any F element that is preceded by an E element.


25



Try to switch a to block display, and then use any style you want. a element will fill li element and you will be able to modify it's look as you want. Don't forget to set li padding to 0.

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

23