Select child elements one after another even when nested

Question

What's given: I have a HTML that's generated by external application and unfortunatly can't be changed. It basically includes container div with lot of child elements, some of wich are nested, like this:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div>
     <div class="child"></div>
     <div class="child"></div>
  </div>
  <div class="child"></div>
  <div class="child"></div>
 </div>

Expected result: I'm trying to use CSS3 animation and animation delay to create nice effect that all list elements quickly fade in with slight delay one after another. CSS goes like this:

.container .child {
  animation: FadeIn 1s ease-out;
}
.container .child:nth-child(1){
  animation-delay: 0.2s
}
.container .child:nth-child(2){
  animation-delay: 0.4s
}
.container .child:nth-child(3){
  animation-delay: 0.6s
}
.container .child:nth-child( .... ){
  animation-delay: 0.8s
}

Problem: As you may understand, animation works great if all elements are directly inside .container DIV. But as soon as some divs are nested, animation breaks out of order. Is it possible to somehow select all .child elements one after another, despite them being nested in additional DIV?

EDIT: to avoid any confusion - I'm trying to achieve this without any JS - just pure CSS approach!

Thanks in advance.

You need JS for two reasons - (a) the structure is dynamic and some are nested within another container while others dont. CSS `nth-child` or `nth-of-type` selectors work only on siblings. (b) though its not clear on how many `.child` elements would be present, I assume it would be dynamic and in which case you need to *calculate* the delay. — Harry, Oct 31 '16 at 18:28

score 0 · Answer 1 · answered Oct 31 '16 at 18:02

0

I believe what you are looking for is .children() not .child(). You can also use a variety of JQuery selectors to specify which children to select. See the JQuery documentation on the children method and, the documentation for JQuery Selectors.

answered Oct 31 '16 at 18:02

campellcl

182
2
14

As you may have missed, there is no jQuery or JS involved at all - pure CSS selectors. Of course, selecting classes with jQ is easy, but the problem here is to achieve same result with CSS :nth-child(x). – Artanis Oct 31 '16 at 18:04
My apologies, the jquery-animate tag posted with your answer threw me off. It looks like [this] (http://stackoverflow.com/questions/4910077/select-all-child-elements-recursively-in-css) may be the answer you are looking for. – campellcl Oct 31 '16 at 18:08
Oh, sorry, obviously I added the tag accidentally. As for the link you gave - while it explains good method, but it's not exactly what I'm up to here. You see - I need to select every child in order (thus the :nth-child(x) ). Recursive selection just selects all of them. – Artanis Oct 31 '16 at 18:15
Hmmmmm. That is a bit more challenging; CSS is really not the way to go. You can specify the type of children to select with [link] (http://www.w3schools.com/cssref/sel_nth-of-type.asp). This will enable you to select 'every div element that is the second child of another div element' etc... – campellcl Oct 31 '16 at 18:29

Select child elements one after another even when nested

1 Answers1