Вопрос по css, css-selectors – Есть ли родительский селектор CSS?

2737

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

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

li < a.active {
    property: value;
}

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

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

Есть идеи?

@KyleT: Вы видели комментарии под принятым ответом? Они в основном документируют прогресс, достигнутый за эти годы. BoltClock♦
Есть ли какие-либо обновления на этот вопрос? Я полагаю, что последняя записанная переписка по этому вопросу была в марте 2014 года. Что с ней происходит? Master Yoda
@BoltClock Есть ли разговоры о том, произойдет ли это? Этот вопрос давно задался вопросом. Master Yoda
Больше обсуждения этой проблемы вstackoverflow.com/questions/45004/… MatrixFrog
@BoltClock Да, но последний с мая прошлого года. Просто любопытно. Master Yoda

Ваш Ответ

26   ответов
7

на браузер.

Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededqueueError: User Rate Limit Exceededselector orderError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
137

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
16

а затем изменить внутренние элементы при наведении курсора. Как это:

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededaError: User Rate Limit ExceededdivError: User Rate Limit ExceededaError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
24

:has()

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

88

нет способа стилизовать родительские / иные элементы элемента с использованием только CSS, но следующее работает сJQuery:

$("a.active").parents('li').css("property", "value");
Error: User Rate Limit Exceeded<Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded<Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded.css("property", "value")Error: User Rate Limit Exceeded.addClass("someClass")Error: User Rate Limit Exceeded.someClass { property: value } (viaError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded:has() selector: $("li:has(a.active)").css("property", "value");Error: User Rate Limit Exceeded!Error: User Rate Limit Exceeded:parent selector, .parents() method, .parent() method.
14

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

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

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

TabIndex

Example

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

Error: User Rate Limit Exceeded.color:focus-within .changeError: User Rate Limit Exceeded.color:focus-withinError: User Rate Limit Exceeded
11

меню ...

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

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

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
2

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;
}
Error: User Rate Limit Exceeded
45

ься на

li.active > a {
    property: value;
}
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
30

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: ...
}
9

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

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

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

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

Вот демонстрация$parent а такжедругой$parent demo that works in IE8, так же какснимок экрана, если у вас нет IE8 для тестирования.

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

2202

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

Selectors Level 3 Spec CSS 2.1 Selectors Spec

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

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

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

li:has(> a.active) { /* styles to apply to the li tag */ }
Error: User Rate Limit Exceededstackoverflow.com/questions/45004/…
Error: User Rate Limit Exceeded:has()Error: User Rate Limit Exceeded:has()Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededtodayError: User Rate Limit Exceededanother answerError: User Rate Limit Exceeded
Error: User Rate Limit Exceededsubject selectorError: User Rate Limit Exceeded!Error: User Rate Limit ExceededThe subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector.
Error: User Rate Limit Exceeded$Error: User Rate Limit Exceeded!Error: User Rate Limit Exceeded
3

я работаю над (личным) проектомaxe (То есть.Augmented CSS Selector Syntax / ACSSSS) который среди своих 7 новых селекторов включает в себя:

an immediate parent selector < (which enables the opposite selection to >) an any ancestor selector ^ (which enables the opposite selection to [SPACE])

axe в настоящее время находится на относительно ранней стадии развития бета-версии.

Смотрите демо здесь:

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

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

Error: User Rate Limit Exceeded<script src="https://rouninmedia.github.io/axe/axe.js"></script>Error: User Rate Limit Exceeded</body>.
2

Но в настоящее время это можно сделать довольно легко в 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>

109

скрипт.

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

Error: User Rate Limit Exceeded#a!Error: User Rate Limit Exceeded#a! pError: User Rate Limit ExceededUncaught TypeError: Cannot call method 'split' of undefinedError: User Rate Limit Exceededjsfiddle.net/HerrSerker/VkVPs
Error: User Rate Limit Exceededpatent()Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
57

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

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

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

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
2

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

Error: User Rate Limit Exceeded jcuenod
3

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>

9

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

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

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

jQuery

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

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

-2

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

$el.closest('.parent').css('prop','value');
22

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

28

Селектор CSS & # x201C;Генеральный брат и сестра комбинатор& # X201D; может быть использован для того, что вы хотите:

E ~ F {
    property: value;
}

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

Error: User Rate Limit Exceeded
17

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

Например:

body! a:hover{
   background: red;
}

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

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

Error: User Rate Limit Exceeded
20

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

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

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

$("li:has(.active)")
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
11

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

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

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

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

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

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

Эти люди все высшего класса в области разработки переднего плана.

Error: User Rate Limit ExceededneedError: User Rate Limit Exceeded
5

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;

Похожие вопросы