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

Question

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

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

li < a.active {
    property: value;
}

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

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

Есть идеи?

Answer 1

Я знаю, что ОП искал решение CSS, но этого легко добиться с помощью jQuery. В моем случае мне нужно было найти родительский тег <ul> для тега <span>, содержащегося в дочернем теге <li>. В jQuery есть селектор :has, поэтому можно определить родителя по дочерним элементам, которые он содержит:

$("ul:has(#someId)")

выберет элемент ul, у которого есть дочерний элемент с идентификатором someId . Или, чтобы ответить на исходный вопрос, нужно выполнить что-то вроде следующего (не проверено):

$("li:has(.active)")

Answer 2

Это наиболее обсуждаемый аспект спецификации селекторов уровня 4 . С этим селектором можно будет стилизовать элемент в соответствии с его потомком, используя восклицательный знак после данного селектора (!).

Например:

body! a:hover{
   background: red;
}

установит красный цвет фона, если пользователь наведет курсор на любую привязку.

Но нам нужно дождаться реализации браузеров: (

Answer 3

Вы можете попытаться использовать гиперссылку в качестве родителя, а затем изменить внутренние элементы при наведении курсора. Как это:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

Таким образом, вы можете изменить стиль в нескольких внутренних тегах в зависимости от ролловера родительского элемента.

Answer 4

Псевдоэлемент :focus-within позволяет выбрать родителя, если у потомка есть фокус.

Элемент может быть сфокусирован, если он имеет атрибут tabindex.

Поддержка браузера для фокусировки в пределах

TabIndex

Пример

.click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
}

<div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div>

Answer 5

В настоящее время родительский селектор отсутствует, и он даже не обсуждается ни в одном из обсуждений W3C. Вам нужно понять, как браузер оценивает CSS, чтобы понять, нужен он нам или нет.

Здесь много технических объяснений.

Джонатан Снук объясняет, как оценивается CSS .

Крис Койер о разговорах селектора родителей .

Гарри Робертс снова пишет эффективные селекторы CSS .

Но У Николь Салливан есть несколько интересных фактов о положительных тенденциях .

Все эти люди высшего класса в области разработки интерфейса.

Answer 6

Кто-нибудь предлагал что-то подобное? Просто идея для горизонтального меню ...

часть HTML

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

часть CSS

/* hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

Обновленная демоверсия и остаток кода

Другой пример как использовать его с вводом текста - выберите родительский набор полей

Answer 7

Есть плагин, который расширяет CSS, чтобы включать некоторые нестандартные функции, которые действительно могут помочь при разработке веб-сайтов. Это называется EQCSS .

EQCSS добавляет родительский селектор. Работает во всех браузерах IE8 и выше. Вот формат:

@element 'a.active' {
  $parent {
    background: red;
  }
}

Итак, мы открыли запрос элемента для каждого элемента a.active, и для стилей внутри этого запроса такие вещи, как $parent, имеют смысл, потому что есть контрольная точка. Браузер может найти родителя, потому что он очень похож на parentNode в JavaScript.

Вот демонстрационная версия $parent и еще одна $parent демонстрационная программа, которая работает в IE8 , а также снимок экрана, если у вас нет IE8 проверить с .

EQCSS также включает мета-селекторы $prev для элемента перед выбранным элементом, $this только для тех элементов, которые соответствуют запросу элемента, и многое другое.

Answer 8

Технически нет прямого способа сделать это, однако, вы можете отсортировать его с помощью jquery или javascript.

Однако, вы тоже можете сделать что-то подобное.

a.active h1 {color:blue;}
a.active p {color: green;}

JQuery

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

Если вы хотите добиться этого с помощью jQuery, вот ссылка на родительский селектор jQuery

Answer 9

W3C исключил такой селектор из-за огромного влияния производительности на браузер.

Answer 10

Краткий ответ: NO , у нас нет parent selector на данном этапе в CSS, но если у вас нет возможности поменять элементы или классы, второй вариант использует JavaScript примерно так:

var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; //your property: value;
  }
});

или более короткий путь, если вы используете jQuery в своем приложении:

$('a.active').parents('li').css('color', 'red'); //your property: value;