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


3180

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

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

li < a.active {
    property: value;
}

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

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

Любые идеи?

Ответы:


2536

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

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

Тем не менее, рабочий вариант селектора уровня 4 включает :has()псевдокласс, который обеспечит эту возможность. Это будет похоже на реализацию jQuery .

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

Однако по состоянию на май 2020 года это все еще не поддерживается ни одним браузером .

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


68
Казалось бы, это уже было предложено и отклонено: stackoverflow.com/questions/45004/…
RobM 27.10.10

14
Похоже, что тема выбора была повторно, за исключением использования !сейчас:The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector.
animuson

13
Приставка $выглядела лучше для меня ... с добавленной !можно пропустить легче.
Кристоф

51
Основной поворот сюжета! Селектор 4 WD был только что обновлен сегодня, чтобы исключить предметный индикатор из быстрого профиля, который должен использоваться реализациями CSS. Если это изменение сохраняется, это означает, что вы больше не сможете использовать предметный индикатор в таблицах стилей (если только вы не добавите какой-либо вид полифилла, подобный описанному в другом ответе ) - вы можете использовать его только с API-интерфейсом выбора и везде иначе может быть реализован полный профиль.
BoltClock

55
Еще одно важное обновление: похоже, они собираются полностью отказаться от синтаксиса селектора тем и заменить его :has()псевдо-псевдонимом, который все знают и любят из jQuery. Последний ED удалил все ссылки на предметный индикатор и заменил его :has()псевдо. Я не знаю точных причин, но CSSWG провела опрос некоторое время назад, и результаты должны были повлиять на это решение. Скорее всего, это для совместимости с jQuery (так что он может использовать qSA без изменений), а также потому, что синтаксис индикатора объекта оказался слишком запутанным.
BoltClock

152

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

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


4
Вы не можете сместить псевдоселектор на элемент списка, поскольку он не является фокусируемым элементом. Он использует селектор: active, поэтому, когда якорь активен, он хочет, чтобы элемент списка был затронут. Элементы списка никогда не будут в активном состоянии. Кроме того, к сожалению, такого селектора не существует. Получение чистого CSS-меню, которое полностью доступно с клавиатуры, кажется невозможным без него (используя селекторы одноуровневых элементов, вы можете создавать подменю, созданные с использованием вложенных списков, но как только список получает фокус, он снова становится скрытым). Если есть какие-то CSS-решения для этой конкретной конуны

12
@Dominic Aquilina Взгляните на вопрос: OP использует класс, а не псевдо-селектор.
Джероен

125

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

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

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

Кстати, это работает в Internet Explorer.


5
Предположим, что использование JQuery patent()будет быстрее. Это нужно проверить, однако
Дан

2
@Idered Сбой, если у вас есть объявление CSS для Селекторного субъекта без дочернего селектора ( #a!один выдает ошибку, #a! pработает), и поэтому другие не будут работать также из-за Uncaught TypeError: Cannot call method 'split' of undefined: см. Jsfiddle.net/HerrSerker/VkVPs
yunzen

3
@HerrSerker Я думаю, что #a! неверный селектор, что он должен выбрать?
Прошло

2
@ Я не знаю. В спецификации не сказано, что это незаконно. #a! должен выбрать сам. По крайней мере, в JavaScript не должно быть ошибок
yunzen

5
Согласно моему комментарию к принятому ответу, похоже, что полифил может потребоваться даже в ближайшем будущем, потому что индикатор темы никогда не может быть реализован браузерами в CSS.
BoltClock

108

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

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

21
<Селектор не существует (проверено с помощью JQuery 1.7.1).
Роб W

6
Возможно, что <-syntax работал в 2009 году, но я обновил его (на 2013 год).
Аластер

5
Еще лучше, если использовать встроенный в JQuery в :has()селектор : $("li:has(a.active)").css("property", "value");. Он читается аналогично предложенному CSS 4 !селектору. Смотрите также: :parentселектор , .parents()метод , .parent()метод .
Рори О'Кейн

7
И вместо того, чтобы использовать .css("property", "value")для стиля выбранные элементы, вы обычно должны .addClass("someClass")иметь в своем CSS .someClass { property: value }( через ). Таким образом, вы можете записать стиль с полной мощью CSS и любых используемых вами препроцессоров.
Рори О'Кейн


69

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

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

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

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


11
так сделайте браузер быстрее. сам интернет быстрее. этот селектор определенно необходим, и причина того, что он не реализован, к сожалению, потому что мы живем в медленном, примитивном мире.
vsync

11
на самом деле, селектор сделал бы очень быстрый браузер медленным.
Салман А

5
Я верю, что разработчики браузеров придумают реализацию, которая (по крайней мере) так же быстра, как и версия javascript, которую люди в любом случае используют.
23 марта

"мы живем в медленном, примитивном мире", кашель, кашель, новые яблочные часы, кашель, кашель
Марвин,

@ Marc.2377 Если вы попробуете приведенный выше пример в JS на своем сайте, я никогда не буду его посещать. С другой стороны, я бы сказал, что большую часть времени вы заботитесь только о непосредственных детях, поэтому, если бы это ограничивалось только непосредственными детьми, это было бы хорошим дополнением без особого воздействия.
xryl669

54

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

li.active > a {
    property: value;
}

3
сделав элемент display: block, вы можете оформить его так, чтобы он соответствовал всей области li. если вы можете объяснить, какой стиль вы ищете, возможно, я мог бы помочь с решением.
Джош

на самом деле это простое и элегантное решение, и во многих случаях имеет смысл установить класс на родительский.
Рикардо

35

Попробуйте переключиться 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: ...
}

31

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

E ~ F {
    property: value;
}

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


24
Это просто селектор брата, это не ребенок, родитель ... на самом деле не
Алиреза,

26

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


24

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

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

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

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

3
Или используйте, $yourSpan.closest("ul")и вы получите родительский UL вашего элемента span. Тем не менее ваш ответ полностью оффтопный imho. Мы можем ответить на все вопросы, связанные с CSS, с помощью решения jQuery.
Робин ван Баален

1
Как указывалось в других ответах, нет способа сделать это с помощью CSS 2. Учитывая это ограничение, ответ, который я предоставил, является одним из тех, которые я знаю, является эффективным и является самым простым способом ответить на вопрос с использованием javascript imho.
Дэвид Кларк

Учитывая ваши голоса, некоторые люди согласны с вами. Но единственный ответ остается принятым; просто и ясно "это не может быть сделано так, как вы этого хотите". Если вопрос заключается в том, как собрать 60 миль в час на велосипеде, и вы отвечаете на него «просто: садитесь в машину и нажимайте на газ», это все равно не ответ. Отсюда мой комментарий.
Робин ван Баален

1
Такой подход сделает SO почти полностью бесполезным. Я ищу так, чтобы решить проблемы, а не найти «единственный ответ» не решает проблему. Вот почему ТАК такой классный, потому что у кошки всегда есть более одного способа.
Дэвид Кларк

23

Псевдоэлемент :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>


2
Это прекрасно работает в моем случае, спасибо! Просто нет, пример будет более иллюстративным, если вы измените цвет на родительский, а не на родного брата, это заменить .color:focus-within .changeна .color:focus-within. В моем случае я использую навигационную панель начальной загрузки, которая добавляет класс к дочерним элементам, когда активен, и я хочу добавить класс к родительской .nav-панели. Я думаю, что это довольно распространенный сценарий, когда я владею разметкой, но компонент css + js является загрузочным (или другим), поэтому я не могу изменить поведение. Хотя я могу добавить tabindex и использовать этот CSS. Спасибо!
Cancebero

22

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

Например:

body! a:hover{
   background: red;
}

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

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


21

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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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


1
Это правильно, но ограничивает код разметки внутри aтега только определенными элементами, если вы хотите соответствовать стандартам XHTML. Например, вы не можете использовать divвнутри a, не получив предупреждение о нарушении схемы.
Ивайло Славов

2
Совершенно верно Ивайло! «a» не является блочным элементом, поэтому не может использовать внутри него блочные элементы.
Речной шторм

1
В HTML5 прекрасно размещать блочные элементы внутри ссылок.
Мэтью Джеймс Тейлор

2
... если бы это было семантически неправильно, они бы не допустили этого в HTML5, где это было раньше.
BoltClock

14

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

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

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

Крис Койер о беседах родительского селектора .

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

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

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


12
Это needопределяется требованиями веб-разработчиков, зависит ли наличие этого в спецификации от других факторов.
nicodemus13

14

Просто идея для горизонтального меню ...

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

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

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


3
Мне совсем не ясно, как вы хотите обобщить это для некоторых / многих / большинства случаев использования родительского селектора или даже для того, какие части этого CSS-кода делают что. Можете ли вы добавить подробное объяснение?
Натан Тагги

2
Я не пытался применить это к сценариям реального мира, поэтому я говорю «Не для производства». Но я думаю, что это можно применить к 2-уровневому меню только с фиксированной шириной элемента. «какие части этого CSS делают что» - здесь .test-sibling на самом деле является фоном родительского элемента (последняя строка CSS).
Илья Б.

2
Добавлено объяснение (раздел css в jsfiddle, начиная с «MAIN PART») ... И я ошибся - может быть любое количество подуровней.
Илья Б.

13

Вот взлом с 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>


12

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

EQCSS добавляет родительский селектор. Он работает во всех браузерах, Internet Explorer 8 и выше. Вот формат:

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

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

Вот демонстрация$parent и еще одна $parentдемонстрация, которая работает в Internet Explorer 8 , а также снимок экрана, если у вас нет Internet Explorer 8 для тестирования с .

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


11

Сейчас 2019 год, и в последнем проекте модуля вложенности CSS на самом деле есть что-то вроде этого. Введение @nestв правила.

3.2. Правило гнездования: @nest

Хотя прямое вложение выглядит красиво, оно несколько хрупкое. Некоторые допустимые вложенные селекторы, такие как .foo &, запрещены, и редактирование селектора определенными способами может неожиданно сделать правило недействительным. Кроме того, некоторые люди считают, что гнездование сложно отличить визуально от окружающих деклараций.

Чтобы помочь во всех этих проблемах, эта спецификация определяет правило @nest, которое накладывает меньше ограничений на то, как правильно вкладывать правила стиля. Его синтаксис:

@nest = @nest <selector> { <declaration-list> }

Правило @nest функционирует идентично правилу стиля: оно начинается с селектора и содержит объявления, которые применяются к элементам, которым соответствует селектор. Единственное отличие состоит в том, что селектор, используемый в правиле @nest, должен содержать гнездо, что означает, что он содержит где-то вложенный селектор. Список селекторов содержит гнездо, если все его отдельные сложные селекторы содержат гнездо.

(Скопируйте и вставьте из URL выше).

Пример допустимых селекторов согласно этой спецификации:

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */

10

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

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

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

JQuery

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

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


9

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


27
ложный. поскольку DOM - это дерево, они должны перейти к родителю, прежде чем перейти к потомку, поэтому просто вернитесь на один узел назад. oo
NullVoxPopuli

9
Селекторы CSS являются очередью, поэтому оценивается порядок селекторов, а не иерархия документа XPath или DOM.
Пол Свитт

3
@ rgb По крайней мере, так нам сказали.
июня

9

Краткий ответ НЕТ ; мы не имеем 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;

5

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

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

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

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

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

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


3
В настоящее время проект находится на ранней стадии бета-тестирования. Вы можете (по крайней мере, в настоящее время) активировать селекторы топоров в своих стилях CSS, включив их <script src="https://rouninmedia.github.io/axe/axe.js"></script>в самый конец HTML-документа, непосредственно перед этим </body>.
Рунин

4

По крайней мере, до CSS 3 включительно, вы не можете так выбрать. Но сейчас это можно сделать довольно легко в JavaScript, вам просто нужно добавить немного ванильного 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>


4

Любые идеи?

CSS 4 будет интересен, если он добавит несколько хуков в ход назад . До тех пор можно (хотя и не желательно) использовать checkboxи / или radio inputs, чтобы нарушить обычный способ, которым вещи связаны, и через это также позволяет CSS работать за пределами своей обычной области ...

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old Microsoft opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* &#9660; - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* &#9660; - Down Arrow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* Microsoft!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
}
<!--
  This bit works, but will one day cause troubles,
  but truth is you can stick checkbox/radio inputs
  just about anywhere and then call them by id with
  a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-default">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-one">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

... довольно грубо , но только с помощью CSS и HTML можно коснуться и снова коснуться всего, кроме bodyи :rootгде угодно, связав свойства idи / с и триггеры ; Скорее всего, кто-то покажет, как снова прикоснуться к ним.forradiocheckbox inputlabel

Еще одно предостережение заключается в том, что может использоваться только один input из конкретных id: сначала checkbox/ radio выигрывает переключенное состояние, другими словами ... Но все метки могут указывать на одно inputи то же , хотя это сделало бы и HTML, и CSS более грубыми.


... Я надеюсь, что существует какой-то обходной путь, который существует в CSS уровня 2 ...

Я не уверен насчет других :селекторов, но я :checkedдля pre-CSS 3. Если я правильно помню, это было что-то вроде, [checked]поэтому вы можете найти его в приведенном выше коде, например,

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

... но для таких вещей, как ::afterи:hover , я совсем не уверен, в какой версии CSS они впервые появились.

Это все заявлено, пожалуйста, никогда не используйте это в производстве, даже в гневе. Как шутка, или, другими словами, просто потому, что что-то можно сделать, не всегда означает, что это должно быть сделано .


3

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

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


1

Изменение родительского элемента на основе дочернего элемента в настоящее время может произойти только тогда, когда у нас есть <input> элемент внутри родительского элемента. Когда ввод получает фокус, его соответствующий родительский элемент может быть затронут с помощью CSS.

Следующий пример поможет вам понять использование :focus-withinCSS.

.outer-div {
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left
}

.outer-div:focus-within {
  background: red;
}

.inner-div {
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;
}
<div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div>


1

Это возможно с помощью амперсанда в 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;
}

2
это правда, но только если вы знаете селектор заранее.
Шахар

11
Это не выбирает h3родителя, который был целью. Это выберет h3s, которые являются потомками .some-parent-selector.
Джейкоб Форд

1

Я бы нанял немного кода JavaScript, чтобы сделать это. Например, в React, когда вы выполняете итерацию по массиву, добавьте другой класс к родительскому компоненту, который указывает, что он содержит ваши дочерние элементы:

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {kiddos.map(kid => <div key={kid.id} />)}
</div>

А потом просто:

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}

0

Отсутствует родительский селектор css (и, следовательно, в препроцессорах css) из-за того, что «Основные причины, по которым рабочая группа CSS ранее отклоняла предложения для родительских селекторов, связаны с производительностью браузера и проблемами с добавочным рендерингом».

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.