CSS нет родного селектора

Question

Рассмотрим следующий html:

<div>
    <div class="iwant" />
    <div class="idontwant" />
</div>
 <div>
    <div class="iwant" />
</div>

Меня интересует селектор (для сканирования контента, поэтому я не могу изменить html), который бы выделил все iwant, которые НЕ имеют брата с классомidontwant.

Answer 1

Нет селектора для одноуровневого сопоставления элементов (или нет) по классу.

Ближайший селектор, о котором я могу подумать, это

.iwant:only-child

Но этот селектор означает, что не может быть никаких других элементов, кроме div class="iwant" как потомков родителя div, независимо от типа или класса. Это может удовлетворить ваши потребности в зависимости от структуры вашего HTML, поэтому стоит попробовать. Если имена классов являются проблемой для вас, то, вероятно, не так уж много решений, потому что в CSS нет псевдокласса :only-of-class, который фильтрует по классам и игнорирует остальные.

Answer 2

Там нет отрицательного родственного CSS-селектора.Используйте селектор брата для установки новых стилей, затем сбросьте стили на .idontwant:

div.iwant {
    /*Set CSS here*/
    display: inline;
}
div.iwant ~ div.idontwant {
    /*Reset CSS*/
    display: block /* Default of DIV is block*/
}

Answer 3

Нет хорошего способа нацелить предмет без определенного предмета.Но вы можете использовать .iwant:last-child для нацеливания на предметы, у которых нет последующего брата.

Пример: http://codepen.io/martinkrulltott/pen/YyGgde