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

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

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

li < a.active {
    property: value;
}

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

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

Любые идеи?

2586
задан jcuenod 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 */ }
2076
ответ дан Dan Herbert 18 июня '09 в 23:16
источник поделиться

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

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

122
ответ дан jeroen 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
ответ дан Idered 13 авг. '11 в 13:13
источник поделиться

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

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

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

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

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

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

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

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

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

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

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

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

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

E ~ F {
    property: value;
}

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

26
ответ дан cobaasta 30 июня '11 в 17:00
источник поделиться

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

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

19
ответ дан Mark Hurd 18 июня '09 в 23:09
источник поделиться

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

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

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

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

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

Например:

body! a:hover{
   background: red;
}

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

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

15
ответ дан Marconi 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
ответ дан riverstorm 13 февр. '12 в 14:22
источник поделиться

да: :has()

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

11
ответ дан Yukulélé 20 янв. '18 в 23:22
источник поделиться

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

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

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

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

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

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

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

10
ответ дан Suraj Naik 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
ответ дан Ilya B. 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
ответ дан sol 25 сент. '17 в 16:55
источник поделиться

Там есть плагин, который расширяет 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
ответ дан innovati 07 апр. '16 в 20:52
источник поделиться

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

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

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

JQuery

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

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

7
ответ дан Prabhakar 14 окт. '15 в 13:08
источник поделиться

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

6
ответ дан rgb 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
ответ дан Alireza 16 июня '17 в 21:06
источник поделиться

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

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

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

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

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

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

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

По крайней мере, вплоть до 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
ответ дан Eduard Florinescu 01 февр. '18 в 17:18
источник поделиться

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

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

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

Здесь взломать с помощью 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
ответ дан Jan Kyu Peblik 01 авг. '18 в 1:47
источник поделиться

Это возможно с амперсандом в 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
ответ дан Rodolfo Jorge Nemer Nogueira 03 авг. '17 в 21:19
источник поделиться
a ~ li {
    background: red
}

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

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

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

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

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

$el.closest('.parent').css('prop','value');
-2
ответ дан Sukhminder Parmar 15 сент. '16 в 7:06
источник поделиться

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

-3
ответ дан Anas Dove 02 дек. '17 в 22:46
поделиться

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

:not(:empty)

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

-4
ответ дан Menachem Almog 02 дек. '17 в 22:46
поделиться
  • 1
  • 2

Другие вопросы по меткам