CSS no sibling selector
Рассмотрим следующий html:
<div>
<div class="iwant" />
<div class="idontwant" />
</div>
<div>
<div class="iwant" />
</div>
Мне интересен селектор (для обхода контента, поэтому я не могу изменить html), который выберет все iwant
, которые НЕ имеют родного брата с классом idontwant
.
Ответы
Ответ 1
Нет выбора селектора для сопоставления элементов (или нет) по классу.
Самый близкий селектор, о котором я могу думать, -
.iwant:only-child
Но этот селектор означает, что не может быть никаких других элементов, кроме div class="iwant"
, как дочерних элементов родительского div
, независимо от типа или класса. Это может удовлетворить ваши потребности в зависимости от структуры вашего HTML, поэтому стоит попробовать. Однако, если имена классов являются для вас проблемой, то, вероятно, не так много решений, потому что в CSS нет псевдо-класса :only-of-class
, который фильтрует класс и игнорирует остальные.
Ответ 2
Нет никакого подходящего способа для таргетинга на элемент без определенного элемента брата. Но вы можете использовать .iwant:last-child
для таргетинга элементов, у которых нет следующего брата.
Пример: http://codepen.io/martinkrulltott/pen/YyGgde
Ответ 3
Нет селектора CSS с отрицательным числом сестер. Используйте селектор для выбора новых стилей, затем reset стили в .idontwant
:
div.iwant {
/*Set CSS here*/
display: inline;
}
div.iwant ~ div.idontwant {
/*Reset CSS*/
display: block /* Default of DIV is block*/
}