html - How to select all children in subparents apart from first -

html - How to select all children in subparents apart from first -

this should simple thing can't seem find i'm after. i've got parent div sub-parents , children inside.

<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>

i want hide '.foo' classes apart first one. how utilize css3 select rest of '.foo' apart first?

ps -- number of '.foo' dynamic , change.

a situation depends on prior knowledge of html structure; there's no way using css lone without having predictable html, because css doesn't have ability select first grandchild of kind, first child.

for example, if know first .foo always occur in first subparent, may able away selecting .foo display block, selecting subsequent subparents , .foos using general sibling combinator ~ , hiding them:

class="lang-css prettyprint-override">.parent > .subparent1 > .foo { display: block; } .parent > .subparent1 > .foo ~ .foo, /* .foo after first in .subparent1 */ .parent > .subparent1 ~ div > .foo { /* .foo in subparents after .subparent1 */ display: none; }

if .subparent1 may not contain .foo elements @ all, , want select first .foo regardless of subparent, don't think it's possible css selectors alone. may have find different way, e.g. assigning class first .foo since it's dynamically generated, or using javascript apply styles instead.

html css css3 css-selectors