nth-of-type()が入れ子のときにごっちゃになる

Question

###実現したいこと

下記ソースコードで、.box1 から順番にフェードアウトさせたいです。

1 → 2 → 3 → 4 → 5 → 6 → 7

###発生している問題
ですが、次のようにフェードアウトが実行されてしまいます。

2,5→ 1,3,6 → 4,7

###該当のソースコード
下記がソースコードです。

<button type="button">fadeOut</button>

<div class="wrapper">

	<div class="box0">
		<p>.box0</p>
	</div>	

	<div class="box1 target">
		<p>.box1</p>
	</div>		

	<nav>		
		<ul>
			<li class="box2 target">
				<p>.box2</p>
			</li>
			<li class="box3 target">					
				<p>.box3</p>
			</li>
			<li class="box4 target">
				<p>.box4</p>
			</li>									
		</ul>
	</nav>

	<div>	
		<div class="box5 target">
			<p>.box5</p>
		</div>
		<div class="box6 target">
			<p>.box6</p>
		</div>	
	</div>		

	<div class="box7 target">				
		<p>.box7</p>
	</div>			

</div>

/* 順番に */
.wrapper .target:nth-of-type(1) {
	animation-delay: 0s;	
}
.wrapper .target:nth-of-type(2) {
	animation-delay: 1s;	
}
.wrapper .target:nth-of-type(3) {
	animation-delay: 2s;	
}
.wrapper .target:nth-of-type(4) {
	animation-delay: 3s;	
}
.wrapper .target:nth-of-type(5) {
	animation-delay: 4s;	
}
.wrapper .target:nth-of-type(6) {
	animation-delay: 5s;	
}
.wrapper .target:nth-of-type(7) {
	animation-delay: 6s;	
}
.wrapper .target:nth-of-type(8) {
	animation-delay: 7s;	
}
.wrapper .target:nth-of-type(9) {
	animation-delay: 8s;	
}

/* フェードアウト */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
	animation-duration: 1s;	  
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

$( 'button' ).click( function(){
	$( '.wrapper .target' ).addClass( 'fadeOut' );	
});

###試したこと
現状はCSSのdelayで順番を適用させていますが、それを止めてjQueryのsetTimeOut()を使ってクラス付与をすればできたので、たぶん原因はdelayが実行される順番を指定しているnth-of-type()にあるのではと考えています。

ではsetTimeout() でいいじゃないかと言われてしまいそうですが、なんとなく「nth-of-type()を正しく使えばCSSだけで実現できるのではないか？」と思い、質問を投稿させて頂きました。

可能でしたらCSSで実現したいです。

ご協力どうぞ宜しくお願い申し上げます。

Answer 1

:nth-of-type()は同一型の兄弟要素の順番で指定するものなので、提示のように「HTML上で出てきた順番」には動きません。

【:nth-of-type() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type

CSS の :nth-of-type() 疑似クラスは、兄弟要素のグループの中で指定された型の要素を、位置に基づいて選択します。

---

個別に番号を振りましょう。

$( '.wrapper .target' ).each( function( i ){ /* たしかDOMツリー上の出現順になったような（未確認） */
    $( this ).addClass( 'target' + i );    
});
$( 'button' ).click( function(){
    $( '.wrapper .target' ).addClass( 'fadeOut' );    
});

【.each() | jQuery API Documentation】
https://api.jquery.com/each/

Comments

[mononoke]

ありがとうございます！CSSはたしかに無理だと納得できたうえ、最適なJSだと感じました！

[mononoke]

夜分遅くに失礼致します。

こちら、もしですけれど、逆さに
$( this ).addClass( 'target' + i );
する方法などございませんか？

「DOMツリー上の出現順」ではなく「DOMツリー下の出現順」でのクラス付与、ということです。

[kei344]

日本語として「ツリー下」ではないですね。

var cnt = $( '.wrapper .target' ).length;
$( '.wrapper .target' ).each( function( i ){
$( this ).addClass( 'target' + ( cnt - i ) );
});

[mononoke]

たしかにツリー下ってどこでしょうか笑
なるほど、初めに数えて引くんですね。迅速なご対応感謝いたします。