Как выбрать всех детей в субпартментах, кроме первых

Question

Это должно быть просто, но я не могу найти, что мне нужно. У меня есть родительский div с суб-родителями и детьми внутри.

<div class="parent"> 
    <div class="subparent1"> 
    <div class="foo">foo1 </div> 
    <div class="bar">bar1 </div> 
    </div> 
    <div class="subparent2"> 
    <div class="foo">foo2 </div> 
    </div> 
    <div class="subparent3"> 
    <div class="bar">bar2 </div> 
    <div class="foo">foo3 </div> 
    <div class="bar">bar3 </div> 
    </div> 
</div> 

Я хочу скрыть все классы .foo, кроме первого. Как использовать CSS3 для выбора всего остального «.foo», кроме первого?

PS - номер '.foo' является динамическим и будет меняться.

Answer 1

Такая ситуация зависит от предварительного знания структуры HTML; нет никакого способа сделать это, используя только CSS без предсказуемого HTML, потому что CSS не имеет возможности выбрать первого внука определенного вида, только первый ребенок.

Например, если вы знаете, что первый .foo будет всегда происходит в первом subparent, вы можете быть в состоянии уйти с выбором любого .foo для отображения в качестве блока, а затем выбрать все последующие subparents и .foo с использованием general sibling combinator ~ и пряча их:

.parent > .subparent1 > .foo { 
    display: block; 
} 

.parent > .subparent1 > .foo ~ .foo, /* .foo after the first in .subparent1 */ 
.parent > .subparent1 ~ div > .foo { /* .foo in subparents after .subparent1 */ 
    display: none; 
} 

Если .subparent1 не может содержать .foo элементы на всех, и вы хотите, чтобы выбрать первый очень .foo независимо от его subparent, я не думаю, что это возможно с только CSS селекторов. Возможно, вам придется найти другой способ, например. путем присвоения дополнительного класса первому .foo, поскольку он динамически сгенерирован или использует JavaScript для применения стилей.