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

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

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

li < a.active {
    property: value;
}

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

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

Любые идеи?

2611
задан 18 июня '09 в 22:59
источник поделиться
32 ответов
  • 1
  • 2

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

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

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


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

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

li:has(> a.active) { /* styles to apply to the li tag */ }
2098
ответ дан 18 июня '09 в 23:16
источник

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

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

122
ответ дан 18 июня '09 в 23:08
источник

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

*! > 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.

100
ответ дан 13 авг. '11 в 13:13
источник

Как уже упоминалось в парах других, нет способа создать элемент parent/s, используя только CSS, но следующее работает с jQuery:

$("a.active").parents('li').css("property", "value");
75
ответ дан 14 дек. '09 в 17:51
источник

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

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

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

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

45
ответ дан 21 янв. '14 в 11:43
источник

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

li.active > a {
    property: value;
}
39
ответ дан 18 июня '09 в 23:06
источник

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

Можете ли вы объяснить больше о том, чего вы пытаетесь достичь? Может быть другой способ решения, например. переместите стиль в li, затем отключите его в a.active или через дочерний селектор.

26
ответ дан 18 июня '09 в 23:06
источник

Попробуйте переключить отображение 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: ...
}
25
ответ дан 23 нояб. '11 в 12:03
источник

Селектор CSS "" Общий сборщик" не может использоваться для того, что вы хотите:

E ~ F {
    property: value;
}

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

25
ответ дан 30 июня '11 в 17:00
источник

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

19
ответ дан 18 июня '09 в 23:09
источник

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

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

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

$("li:has(.active)")
17
ответ дан 17 мая '13 в 1:04
источник

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

Например:

body! a:hover{
   background: red;
}

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

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

15
ответ дан 05 мая '15 в 21:24
источник

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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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

14
ответ дан 13 февр. '12 в 14:22
источник

да: :has()

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

12
ответ дан 20 янв. '18 в 23:22
источник

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

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

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

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

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

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

Эти люди являются высшим классом в области разработки интерфейса.

10
ответ дан 21 марта '14 в 15:58
источник

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

часть 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%; }

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

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

9
ответ дан 27 окт. '15 в 20:55
источник

Псевдоэлемент :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>
8
ответ дан 25 сент. '17 в 16:55
источник

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

Допустим, вы тоже можете сделать что-то подобное.

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

JQuery

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

Если вы хотите достичь этого, используя jQuery, здесь приведена ссылка для родительский селектор jQuery

7
ответ дан 14 окт. '15 в 13:08
источник

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

Одна из вещей, добавленных EQCSS, - это родительский селектор. Он работает во всех браузерах IE8 и выше. Здесь формат:

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

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

Здесь приведено описание $parent и другое $parent demo, которая работает в IE8, а также скриншот, если у вас нет IE8 для тестирования с.

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

7
ответ дан 07 апр. '16 в 20:52
источник

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

6
ответ дан 16 авг. '11 в 7:43
источник

Короткий ответ НЕТ, на данном этапе в CSS нет parent selector, но если вы все равно не хотите менять элементы или классы, второй вариант использует 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;
3
ответ дан 16 июня '17 в 21:06
источник

Хотя в настоящее время в стандартном CSS нет родительского селектора, я работаю над (личным) проектом под названием ax (т.е. расширенным синтаксисом селектора CSS/ACSSSS), который среди семи новых селекторов, включает в себя:

  • непосредственный родительский селектор < (который позволяет сделать противоположный выбор >)
  • любой предка-селектор ^ (который позволяет сделать противоположный выбор [SPACE])

ax в настоящее время находится на относительно ранней стадии развития BETA.

Смотрите демонстрацию здесь:

http://rounin.co.uk/projects/axe/axe2.html

(сравните два списка слева в стандартном селекторе и два списка справа в стиле с селекторами тонов)

1
ответ дан 18 февр. '17 в 20:06
источник

Здесь взломать с помощью pointer-events с hover:

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
/* accessory */
.parent {
	width: 200px;
	height: 200px;
	background: gray;
}
.parent, 
.selector {
	display: flex;
	justify-content: center;
	align-items: center;
}
.selector {
	cursor: pointer;
	background: silver;
	width: 50%;
	height: 50%;
}
		</style>
		<style>
/* pertinent */
.parent {
	background: gray;
	pointer-events: none;
}
.parent:hover {
	background: fuchsia;
}
.parent 
.selector {
	pointer-events: auto;
}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="selector"></div>
		</div>
	</body>
</html>
0
ответ дан 01 авг. '18 в 1:47
источник

По крайней мере, вплоть до CSS3, включая CSS3, вы не можете выбрать это. Но теперь это можно сделать довольно легко в JS, вам просто нужно добавить немного ванильного JavaScript, обратите внимание, что код довольно короткий.

      cells = document.querySelectorAll('div');
              [].forEach.call(cells, function (el) {
              //console.log(el.nodeName)
                if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
                console.log(el)};
            });
            <div>Peter</div>
            <div><a href="#">Jackson link</a></div>
            <div>Philip</div>
            <div><a href="#">Pullman link</a></div>
0
ответ дан 01 февр. '18 в 17:18
источник

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

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

0
ответ дан 28 нояб. '15 в 0:16
источник

Это возможно с амперсандом в SASS:

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

вывод CSS:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}
0
ответ дан 03 авг. '17 в 21:19
источник
a ~ li {
    background: red
}

В css3 добавлен новый селектор, поэтому, если html выглядит так:

<ul>
  <li>
    <a>Some text</a>
  </li>
</ul>

Фактически вы можете воздействовать на родителя элемента "a", который является "li"

-1
ответ дан 16 мая '18 в 15:49
источник

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

$el.closest('.parent').css('prop','value');
-3
ответ дан 15 сент. '16 в 7:06
источник

Я не думаю, что CSS может поддерживать то, что вам нужно. По какой-то причине вы можете полагаться на кодирование в javascript для удовлетворения ваших требований.

-3
ответ дан 02 дек. '17 в 22:46

В CSS3 (работает на firefox 21 в linux):

:not(:empty)

Выбирает элементы с дочерними/текстовыми узлами.

-4
ответ дан 02 дек. '17 в 22:46
  • 1
  • 2

Другие вопросы по меткам или Задайте вопрос