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

Question

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

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

li < a.active {
    property: value;
}

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

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

Есть идеи?

Answer 1

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

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

• Селекторы Уровень 3 Спецификация
• Спецификация селекторов CSS 2.1

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

---

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

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

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

Answer 2

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

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

Answer 3

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

*! > 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; }

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

Кстати, он работает в IE.

Answer 4

Как уже упоминалось несколькими другими, не существует способа стилизовать родительский (ые) элемент (ы), используя только CSS, но следующее работает с jQuery :

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

Answer 5

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

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

Тогда браузеру придется ждать, пока он загрузит и проанализирует все до </body>, чтобы определить, должна ли страница быть красной или нет.

Эта статья Почему у нас нет родительского селектора объясняет это подробно.

Answer 6

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

li.active > a {
    property: value;
}

Answer 7

Попробуйте переключить отображение a на block, а затем используйте любой стиль, который вы хотите. Элемент a заполнит элемент li, и вы сможете изменить его внешний вид так, как вам хочется. Не забудьте установить li отступ в 0.

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

Answer 8

да: :has()

поддержка браузера: нет

Answer 9

Селектор CSS « General Sibling Combinator » может использоваться для того, что вы хотите:

E ~ F {
    property: value;
}

Соответствует любому элементу F, которому предшествует элемент E.

Answer 10

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