Вы также можете использовать метод ForEach () в общих списках для добавления:
var bigInts = new List();
BigInteger sum = 0;
bigInts.ForEach(x => sum += x);
В настоящее время нет способа выбрать родительский элемент элемента в CSS.
Если бы был способ сделать это, это было бы в любой из текущих спецификаций селекторов CSS:
Тем временем, вам придется прибегнуть к JavaScript, если вам нужно выбрать родительский элемент.
Рабочий блок для выбора уровня 4 включает псевдокласс класса :has()
, который работает аналогично реализации jQuery . По состоянию на 2018 год это все равно не поддерживается никаким браузером .
Используя :has()
, исходный вопрос можно было бы решить с помощью этого:
li:has(> a.active) { /* styles to apply to the li tag */ }
Как уже упоминалось в парах других, нет способа стилизовать родительский элемент элемента, используя только CSS, но следующее работает с jQuery :
$("a.active").parents('li').css("property", "value");
<
-syntax работал в 2009 году, но я обновил его (на 2013 год).
– Alastair
2 May 2013 в 06:10
:has()
jQuery : $("li:has(a.active)").css("property", "value");
. Он читается аналогично предложенному CSS 4 !
селектору. См. Также: :parent
селектор , .parents()
метод , .parent()
метод .
– Rory O'Kane
8 May 2013 в 23:12
.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;
Вы можете попытаться использовать гиперссылку в качестве родителя, а затем изменить внутренние элементы при наведении. Например:
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}
Таким образом вы можете изменить стиль во множестве внутренних тегов на основе опрокидывания родительского элемента.
a
только для определенных элементов, если вы хотите соответствовать стандартам XHTML. Например, вы не можете использовать div
внутри a
, не получая предупреждения о нарушении схемы.
– Ivaylo Slavov
24 July 2012 в 19:22
Селектор 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)")
$yourSpan.closest("ul")
, и вы получите родительский UL вашего элемента span. Тем не менее, ваш ответ полностью оффтопический имхо. Мы можем ответить на все вопросы, связанные с CSS, с помощью решения jQuery.
– Robin van Baalen
18 July 2013 в 18:40
По крайней мере, вплоть до 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
только для тех элементов, которые соответствуют запросу элемента, и многое другое.
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.
patent()
будет быстрее. Однако это тестирование потребности
– Dan
22 September 2011 в 20:30
#a!
вызывает ошибку, #a! p
работает), поэтому другие не будут работать ни из-за Uncaught TypeError: Cannot call method 'split' of undefined
: см. jsfiddle.net/HerrSerker/VkVPs
– HerrSerker
16 April 2013 в 16:33
Технически нет прямого способа сделать это, однако вы можете сортировать это с помощью 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>
.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;
}
Хотя в настоящее время в стандартном CSS нет родительского селектора, я работаю над (личным) проектом с именем ax (т. е. расширенный синтаксис селектора CSS / ACSSSS ), который среди семи новых селекторов , включает в себя:
<
(который позволяет сделать противоположный выбор >
) ^
(который позволяет сделать противоположный выбор [SPACE]
) ax в настоящее время на относительно ранней стадии разработки BETA.
См. Демонстрацию здесь:
http://rounin.co.uk/projects/axe/axe2.html
(сравните два списка на в левом стиле со стандартными селекторами и двумя списками справа в стиле с селекторами топора)
<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');
!
сейчас: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$
выглядел лучше для меня ... добавленный!
можно упускать из виду более легко. – Christoph 13 February 2012 в 13:25:has()
, который все узнали и полюбили jQuery. Последний ED удалил все ссылки на индикатор объекта и заменил его псевдоним:has()
. Я не знаю точных причин, но CSSWG провела опрос некоторое время назад, и результаты должны были повлиять на это решение. Скорее всего, это совместимость с jQuery (поэтому он может использовать qSA без изменений), и потому, что синтаксис индикатора предмета оказался слишком запутанным. – BoltClock♦ 4 May 2014 в 15:28