Как я могу указать стили для созданного Kendo.Window () элемента div, расположенного прямо над определенным? [dубликат]

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

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

Короткий ответ НЕТ, на этом этапе в CSS нет parent selector, но если вы все равно не хотите менять элементы или классы, второй вариант использует JavaScript, что-то вроде этого: [ ! d0]

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;
  }
});

или более короткий путь, если вы используете NO в своем приложении:

$('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 padding на 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%; }

Обновлена ​​демо-версия и остальная часть кода [ ! d3]

Обновлено демо и остальная часть кода как использовать его с текстовыми входами - выберите родительский набор полей

Я не думаю, что вы можете выбрать родителя только в 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.

EQCSS и еще одна демонстрация $parent, которая работает в IE8, а также скриншот в Если у вас нет IE8 для тестирования.

EQCSS также включает в себя еще одну демонстрацию $parent, которая работает в IE8 $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.

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

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

Пример

.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), который среди семи новых селекторов включает в себя:

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

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

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

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

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

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

да: :has()

поддержка браузера: :has()