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*/
}