Эффект Hover от ребенка-сиблинга до ребенка-сестры [дубликат]

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

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

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

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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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

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

E ~ F {
    property: value;
}

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

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

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

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

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

По крайней мере, вплоть до 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>

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

Например:

body! a:hover{
   background: red;
}

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

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

a ~ li {
    background: red
}

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

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

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

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

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

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

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

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

Обновлено демо и остальные кода

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

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

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

Вот взломать с помощью 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>

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

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

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

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

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

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

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

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

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

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

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

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

jQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

yes: :has()

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

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

li.active > a {
    property: value;
}

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

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

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

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

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

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

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