:nth-child擬似クラス は、n番目の子要素にスタイルを適用する際に使用します。ここで「n」とは、0､1,2,3....など無限大の数字のことを指します。類似する要素としてfirst-childとlast-childがあります。
以下の10個のボールに:nth-childを指定してみます。
7番目に表示する<li>要素に適用させます。
li:nth-child(7){
box-shadow:inset 0 2px 45px #F00;
}
1
2
3
4
5
6
7
8
9
10
li要素のうち、奇数だけを45度回転するよう指定しました。oddの代わりに「2n+1」に指定しても結果は同じとなります。
li:nth-child(odd) {
box-shadow:inset 0 2px 45px #02cc15;
transform-origin:50% 50%;
transform:rotate(45deg);
}
1
2
3
4
5
6
7
8
9
10
スポンサーリンク
li要素のうち、偶数だけをY軸方向に20px移動するよう実装します。evenの代わりに「2n」に指定しても結果は同じとなります。
li:nth-child(even){
box-shadow:inset 0 2px 45px #0415fc;
transform-origin:50% 50%;
transform:translateY(20px);}
}
1
2
3
4
5
6
7
8
9
10
nは0,1,2,3...などの数字のことを指しています。それに負の値：マイナスがついて-1, -2, -3となりまます。ここでは:nth-child(3)とその未満のボールに適用されます。
li:nth-child(-n+3){
box-shadow:inset 0 2px 45px #fc11a6;
}
1
2
3
4
5
6
7
8
9
10
1番ボールから始まって3個のボールに+１をしたボールにスタイルを手寄与させます。1番ボールには上記の:first-childの「border-radius:3px;」が適用されています。
li:nth-child(3n+1){
box-shadow:inset 0 2px 45px #04bdfa;
transform-origin:50% 50%;
transform:translateY(-30px)
}
1
2
3
4
5
6
7
8
9
10
3番目ボールから8番目のボールまでが実装されます。
li:nth-child(n+3):nth-child(-n+8) {
box-shadow:inset 0 2px 45px #5003ff;
border-radius:3px;
}
li:nth-child(n+3):nth-child(-n+8) .numbers {
color:#fff;}
}
1
2
3
4
5
6
7
8
9
10
最後から何番目かにスタイルを適用させます。下記の場合、後ろから3番目の8番目のボールに実装します。
li:nth-last-child(3){
box-shadow:inset 0 2px 45px #2500c3;
}
1
2
3
4
5
6
7
8
9
10
:nth-childが連続している場合、これは数式のA and Bという意味です。AとBの両方に存在するものだけが選択されます。下記の例では、th-child(3n+1)の指定で子要素の1,4,7,10のスタイルが適用されますが、一方nth-child(even)の場合は偶数である2,4,6,8,10がありますが、この２つのnth-child両側に重複して存在するの数字は4,10、この２つが選ばれます。
li:nth-child(3n+1):nth-child(even){
border-radius:3px;
box-shadow:inset 0 2px 45px #04f637;
}
1
2
3
4
5
6
7
8
9
10
ここでは２つのandが存在します。A and B and C、即ちABC３つに行痛で存在する数字が選択されます。
li:nth-child(n+2):nth-child(odd):nth-child(-n+9) {
box-shadow:inset 0 2px 45px #d007ce;
}
まず、nth-child(n+2)の指定では2,3,4,5,6,7,8,9,10が選択されます。次にnth-child(odd)では奇数である1,3,5,7,9になります。最後のnth-child(-n+9)では1,2,3,4,5,6,7,8,9となります。結果この３つに重複して存在する数字3,5,7,9の４つが最終的に選ばれます。
1
2
3
4
5
6
7
8
9
10
スポンサーリンク
スポンサーリンク
Category
BILLION WALLET Copyright©All rights reserved