CSS: выберите все элементы потомка X, но не потомки Y

Я хотел был бы иметь возможность выбрать все элементы класса zz, которые являются потомками элемента класса xx, но не потомок класса yy.CSS: выберите все элементы потомка X, но не потомки Y

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

<div class="xx"> 
    ... arbitrary depth ... 
    <div class="zz" id="1"> 
    </div> 

    <div class="yy"> 
     <div class=zz" id="2"> 
     </div> 
    ... 
    </div> 
... 
</div>

Селектор Я ищу бы в вышеуказанном случае возвращает элемент id1, но не id2 элемент.

источник

2016-02-16 peterh

мою идею, не возможно! –

Довольно точно это невозможно, поскольку это по существу [** родительский селектор **] (http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?rq=1) –

Будет ли это работать на вас?

Надеемся, что сложнее объединить несколько :not(), чем выполнять набор правил набора/сброса.

:not(.yy):not(body) > .zz { color: red }

<div class="xx"> 
 
    ... arbitrary depth ... 
 
    <div> 
 
     <div class="zz" id="1a">1a 
 
     </div> 
 
    </div> 
 
    
 
    <div class="zz" id="1b">1b 
 
    </div> 
 

 
    <div class="yy"> 
 
     <div class="zz" id="2">2 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="zz" id="3">3 
 
</div>

Второй лучше, и если я вам, было бы добавить дополнительный div для произвольных элементов, чтобы соответствовать .yy класс в глубину.

Если это возможно, то .xx :not(.yy) .zz { ... } правило, которое предполагает fcalderan будет работать

.xx :not(.yy) .zz { color: red }

<div class="xx"> 
 
    <div> 
 
    
 
     ... arbitrary depth ... 
 

 
    <div> 
 
     <div class="zz" id="1a">1a 
 
     </div> 
 
    </div> 
 

 
    <div class="zz" id="1b">1b 
 
    </div> 
 
    
 

 
    </div> 
 
    <div class="yy"> 
 
    <div class="zz" id="2">2 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="zz" id="3">3 
 
</div>

источник

2016-02-16 18:46:52 LGSon

Неа. Он также выберет те zz, которые не являются потомками xx. Я обновил ваш блестящий пример и добавил item3. Пункт3 * не должен быть выбран *. – peterh

@peterh Вы можете комбинировать ': not()' ... обновленный мой ответ – LGSon

Я дал вам взнос за попытку. :-) К сожалению, у меня нет контроля над HTML, как вы, возможно, догадались. Оба ваших решения несут в себе подразумеваемые предположения. Эти предположения в моем случае неверны. – peterh

Я не думаю, что вы можете написать селектор, как то, что работает в общем случае.

Однако, вы можете использовать

.xx .zz { 
    /* Some styles */ 
} 
.yy .xx .zz, .xx .yy .zz { /* Or maybe just `.yy .zz` */ 
    /* Undo previous styles */ 
}

Конечно, это требует знания стилей .xx .zz элементов, прежде чем применяется первый набор правил.

источник

2016-02-16 19:01:03 Oriol

Это только для вашего сценария. основанный на вашей заданной структуре html.

.xx > .zz {}

, но это только выбрать непосредственный ребенок «ZZ» класс класса «хх»

источник

2016-02-16 22:07:41

CSS: выберите все элементы потомка X, но не потомки Y

ответ

Смежные вопросы