Изменить родительский псевдоэлемент на основе дочернего атрибута с помощью: имеет SASS [дубликат]

Как сказал Алексей, агрегирование является более общим из суммы. Ниже представлен метод расширения.

public BigInteger static Sum(IEnumerable this lst)
{
    return lst.Aggregate(BigInteger.Zero, (acc, next)=> acc.Add(next));
}

Я не тестировал это, и мой C # может немного порыться. но идея должна быть надежной: см. http://msdn.microsoft.com/en-us/library/bb549218.aspx#Y0

2554
задан jcuenod 12 November 2016 в 00:15
поделиться

27 ответов

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

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

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


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

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

li:has(> a.active) { /* styles to apply to the li tag */ }
2023
ответ дан Dan Herbert 17 August 2018 в 10:22
поделиться
  • 1
    Казалось бы, это уже было предложено и отклонено: stackoverflow.com/questions/45004/… – RobM 27 October 2010 в 13:22
  • 2
    Похоже, что селектор субъекта был повторно просмотрен, кроме как с помощью ! сейчас: The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector. – animuson♦ 29 January 2012 в 23:30
  • 3
    Добавленный $ выглядел лучше для меня ... добавленный ! можно упускать из виду более легко. – Christoph 13 February 2012 в 13:25
  • 4
    Крупный сюжет твист! Селекторы 4 WD были недавно обновлены сегодня , чтобы исключить индикатор объекта из быстрого профиля, который должен использоваться реализациями CSS. Если это изменение остается, значит, вы больше не сможете использовать индикатор темы в таблицах стилей (если вы не используете добавить какой-то полиполк, такой как тот, который описан в , другой ответ ) - вы можете использовать только это с помощью API Selectors и где-либо еще, что полный профиль может быть реализован. – BoltClock♦ 2 May 2013 в 16:19
  • 5
    Еще одно серьезное обновление: похоже, они рассматривают возможность полного удаления синтаксиса селектора субъекта и замены его псевдонимом :has(), который все узнали и полюбили jQuery. Последний ED удалил все ссылки на индикатор объекта и заменил его псевдоним :has(). Я не знаю точных причин, но CSSWG провела опрос некоторое время назад, и результаты должны были повлиять на это решение. Скорее всего, это совместимость с jQuery (поэтому он может использовать qSA без изменений), и потому, что синтаксис индикатора предмета оказался слишком запутанным. – BoltClock♦ 4 May 2014 в 15:28

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

$("a.active").parents('li').css("property", "value");
76
ответ дан Alastair 17 August 2018 в 10:22
поделиться
  • 1
    Селектор < не существует (проверяется с помощью jQuery 1.7.1). – Rob W 23 February 2012 в 19:53
  • 2
    Возможно, что < -syntax работал в 2009 году, но я обновил его (на 2013 год). – Alastair 2 May 2013 в 06:10
  • 3
    Еще лучше, используйте встроенный селектор :has() jQuery : $("li:has(a.active)").css("property", "value");. Он читается аналогично предложенному CSS 4 ! селектору. См. Также: :parent селектор , .parents() метод , .parent() метод . – Rory O'Kane 8 May 2013 в 23:12
  • 4
    И вместо того, чтобы использовать .css("property", "value") для стилирования выбранных элементов, вы обычно должны .addClass("someClass") и иметь в своем CSS .someClass { property: value } ( через ). Таким образом, вы можете обозначить стиль с полной мощью CSS и любыми препроцессорами, которые вы используете. – Rory O'Kane 8 May 2013 в 23:20

Короткий ответ НЕТ, у нас на этом этапе в 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 17 August 2018 в 10:22
поделиться

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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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

39
ответ дан BoltClock 17 August 2018 в 10:22
поделиться
  • 1
    сделав элемент display: block, вы можете его стиль, чтобы он соответствовал всей области li. если вы можете объяснить, какой стиль вы ищете, возможно, я смогу помочь с решением. – Josh 18 June 2009 в 22:53
  • 2
    Это верно, но ограничивает код разметки в теге a только для определенных элементов, если вы хотите соответствовать стандартам XHTML. Например, вы не можете использовать div внутри a, не получая предупреждения о нарушении схемы. – Ivaylo Slavov 24 July 2012 в 19:22
  • 3
    Тотали справа Ивайло! & Quot; & Quot; является неблокирующим элементом, поэтому он не может использовать в нем элементы блока. – riverstorm 13 December 2012 в 00:34
  • 4
    В HTML5 прекрасно вставлять элементы блока внутри ссылок. – Matthew James Taylor 6 April 2014 в 08:47
  • 5
    @MatthewJamesTaylor и семантически это совершенно неправильно – Vangel Tzo 10 April 2014 в 15:39
  • 6
    ... если бы это было семантически неправильно, они бы не допустили его в HTML5, где это было не раньше. – BoltClock♦ 28 December 2015 в 16:54
  • 7
    это на самом деле простое и изящное решение, и во многих случаях имеет смысл установить класс в родительском. – Ricardo 19 March 2016 в 00:17

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

E ~ F {
    property: value;
}

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

26
ответ дан Cody Gray 17 August 2018 в 10:22
поделиться
  • 1
    Это неправильный ответ, но спасибо, что напомнили нам об этом селекторе – Dan 22 September 2011 в 20:25
  • 2
    Это просто селектор, он не является дочерним, родительским ... на самом деле не отвечает на вопрос помощника – Alireza 16 June 2017 в 18:08

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

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

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

$("li:has(.active)")
17
ответ дан David Clarke 17 August 2018 в 10:22
поделиться
  • 1
    Или используйте $yourSpan.closest("ul"), и вы получите родительский UL вашего элемента span. Тем не менее, ваш ответ полностью оффтопический имхо. Мы можем ответить на все вопросы, связанные с CSS, с помощью решения jQuery. – Robin van Baalen 18 July 2013 в 18:40
  • 2
    Как указано в других ответах, нет способа сделать это с помощью CSS 2. Учитывая это ограничение, ответ, который я дал, является тем, который я знаю, является эффективным и является самым простым способом ответа на вопрос, используя javascript imho. – David Clarke 19 December 2015 в 20:27
  • 3
    С учетом ваших приоритетов некоторые люди согласны с вами. Но единственный ответ остается принятым; простой и простой ", он не может быть выполнен так, как вы этого хотите". Если вопрос заключается в том, как архивировать 60 миль в час на велосипеде, и вы отвечаете «простым»; садиться в машину и попадать в газ. ", это еще не ответ. Отсюда мой комментарий. – Robin van Baalen 19 December 2015 в 20:36
  • 4
    Такой подход сделал бы почти бесполезным. Я ищу SO для решения проблем, а не для поиска «только ответа». не решает проблему. Вот почему SO так потрясающе, потому что всегда есть несколько способов кожи кошки. – David Clarke 20 December 2015 в 19:35

По крайней мере, вплоть до 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 17 August 2018 в 10:22
поделиться

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

Например:

body! a:hover{
   background: red;
}

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

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

15
ответ дан Eric 17 August 2018 в 10:22
поделиться
  • 1
    К сожалению, но теперь эта функция не соответствует спецификации, как я знаю ... – Qwertiy 20 November 2015 в 13:06
a ~ li {
    background: red
}

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

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

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

0
ответ дан Feruza 17 August 2018 в 10:22
поделиться
  • 1
    Он работает по-другому. Ваш css выбирает все элементы 'li', которым предшествует элемент 'a' на том же уровне. Поэтому 'a' получает красный фон только в этом примере: & lt; ul & gt; & Lt; & Li GT; & Lt; & Li GT; & эль л; / & Li GT; & lt; a & gt; Некоторый текст & lt; / a & gt; & Л; / & Li GT; & Lt; / мкл & GT; – indreed 22 May 2018 в 09:47

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

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

0
ответ дан Gaurav Aggarwal 17 August 2018 в 10:22
поделиться

Попробуйте переключить отображение 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
ответ дан Igor Ivancha 17 August 2018 в 10:22
поделиться

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

часть 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. 17 August 2018 в 10:22
поделиться
  • 1
    Мне не совсем ясно, как вы хотите обобщить это на некоторые / многие / большинство случаев использования родительского селектора или даже на то, какие именно части этого CSS делают. Можете ли вы добавить подробное объяснение? – Nathan Tuggy 28 October 2015 в 08:57
  • 2
    Я не пытался применять это в реальных сценариях, поэтому я говорю «Не для производства». Но я думаю, что он может применяться к 2-уровневому меню только с фиксированной шириной элемента. & quot; какие части этого CSS делают то, что & quot; - .test-sibling - это фактически фон родительского элемента (последняя строка CSS). – Ilya B. 28 October 2015 в 09:08
  • 3
    Добавлено объяснение (css-раздел jsfiddle, начиная с «ГЛАВНАЯ ЧАСТЬ») ... И я ошибся - может быть любое количество подуровней. – Ilya B. 28 October 2015 в 13:59

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

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

120
ответ дан JakeGould 17 August 2018 в 10:22
поделиться
  • 1
    Вы не можете переместить псевдоселектор в элемент списка, так как он не является настраиваемым элементом. Он использует активный переключатель, поэтому, когда он активен, он хочет, чтобы элемент списка был затронут. Элементы списка никогда не будут в активном состоянии. В стороне, к сожалению, такой селектор не существует. Получение чистого CSS-меню, которое будет полностью доступным для клавиатуры, кажется невозможным без него (с помощью селекторов для сиблинга вы можете создавать подменю, созданные с помощью вложенных списков, чтобы отображаться, но как только список получает фокус, он снова становится скрытым). Если есть какие-либо решения только для CSS для этой конкретной конуны – user 26 August 2011 в 14:46
  • 2
    @Dominic Aquilina Взгляните на вопрос, OP использует класс, а не псевдоселектор. – jeroen 26 August 2011 в 15:34

Вот взломать с помощью 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 17 August 2018 в 10:22
поделиться

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

19
ответ дан Mark Hurd 17 August 2018 в 10:22
поделиться

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

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

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

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

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

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

10
ответ дан Nathan Tuggy 17 August 2018 в 10:22
поделиться
  • 1
    need определяется требованиями веб-разработчиков, независимо от того, будет ли он в спецификации решаться другими факторами. – nicodemus13 15 May 2014 в 10:04

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

*! > 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
ответ дан neshpro9 17 August 2018 в 10:22
поделиться
  • 1
    предположим, что использование jquery patent() будет быстрее. Однако это тестирование потребности – Dan 22 September 2011 в 20:30
  • 2
    @Idered Это не удается, если у вас есть объявление CSS объекта Selector без родительского селектора (только #a! вызывает ошибку, #a! p работает), поэтому другие не будут работать ни из-за Uncaught TypeError: Cannot call method 'split' of undefined: см. jsfiddle.net/HerrSerker/VkVPs – HerrSerker 16 April 2013 в 16:33
  • 3
    @HerrSerker Я думаю #a! является недопустимым селектором, что он должен выбрать? – Idered 17 April 2013 в 14:41
  • 4
    @Idered, я не знаю. Спецификация не говорит, что это незаконно. #a! должен выбрать сам. По крайней мере, у них не должно быть ошибок в JavaScript – HerrSerker 17 April 2013 в 16:31
  • 5
    По моему комментарию к принятому ответу, похоже, что полиполк может потребоваться даже в ближайшем будущем, потому что предметный индикатор никогда не может быть реализован браузерами в CSS. – BoltClock♦ 2 May 2013 в 16:35

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

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

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

jQuery

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

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

7
ответ дан Prabhakar 17 August 2018 в 10:22
поделиться

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

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

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

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

44
ответ дан Praveen Kumar Purushothaman 17 August 2018 в 10:22
поделиться
  • 1
    поэтому сделайте браузер более быстрым. Интернет быстрее. этот селектор определенно необходим, и причина его нецелесообразности, к сожалению, потому, что мы живем в медленном, примитивном мире. – vsync 19 February 2014 в 23:33
  • 2
    Фактически, селектор сделает очень быстрый просмотр браузера медленным. – Salman A 20 February 2014 в 06:09
  • 3
    Я верю, что разработчики браузеров придумают реализацию, которая (по крайней мере) так же быстро, как версия javascript, которая в любом случае используется в любом случае. – Marc.2377 9 June 2018 в 00:15

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

6
ответ дан rgb 17 August 2018 в 10:22
поделиться
  • 1
    ложный. потому что DOM - это дерево, они должны перейти к родительскому элементу, прежде чем попасть к нему, поэтому просто верните один узел. o.o – NullVoxPopuli 10 November 2011 в 18:56
  • 2
    Селекторы CSS представляют собой queue , поэтому порядок выбора селектора оценивается, а не иерархия документа XPath или DOM. – Paul Sweatte 18 August 2012 в 17:14
  • 3
    @rgb По крайней мере, это то, что нам сказали. – HerrSerker 16 April 2013 в 16:35

Псевдоэлемент :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
ответ дан Roberrrt 17 August 2018 в 10:22
поделиться
  • 1
    Это отлично работает в моем случае, спасибо! Просто нет, пример будет более иллюстративным, если вы измените цвет на родителя, а не на сестру, это заменит .color:focus-within .change на .color:focus-within. В моем случае я использую bootstrap nav-bar, которые добавляют класс к дочерним элементам, когда они активны, и я хочу добавить класс в родительский .nav-bar. Я думаю, что это довольно распространенный сценарий, когда у меня есть разметка, но компонент css + js является загрузочным (или другим), поэтому я не могу изменить поведение. Хотя я могу добавить tabindex и использовать этот css. Благодаря! – cancerbero 29 June 2018 в 15:13

Это возможно с амперсандом в 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 17 August 2018 в 10:22
поделиться
  • 1
    это правда, но только если вы знаете селектор заранее. – Shahar 9 August 2017 в 08:02

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

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

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

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

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

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

1
ответ дан Rounin 17 August 2018 в 10:22
поделиться
  • 1
    В настоящее время проект находится на ранней стадии Бета. Вы можете (по крайней мере в настоящее время) активировать селектор тонов в стилях CSS, включив <script src="https://rouninmedia.github.io/axe/axe.js"></script> в самом конце вашего html-документа непосредственно перед </body>. – Rounin 12 July 2017 в 16:40

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

$el.closest('.parent').css('prop','value');
-1
ответ дан Sukhminder Parmar 17 August 2018 в 10:22
поделиться

yes: :has()

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

8
ответ дан Yukulélé 17 August 2018 в 10:22
поделиться
39
ответ дан BoltClock 6 September 2018 в 07:54
поделиться
10
ответ дан Nathan Tuggy 6 September 2018 в 07:54
поделиться