Home > 備忘録 > Web page 作成 > nth-child等の使い方( 63 )

nth-child等の使い方

1. 例題
1. :nth-child(5)

先頭から5番目

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


2. :nth-last-child(5)

最後から5番目

• 15
• 14
• 13
• 12
• 11
• 10
• 9
• 8
• 7
• 6
• 5
• 4
• 3
• 2
• 1


3. :not(:nth-child(3))

先頭から3番目以外

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


4. :not(:nth-last-child(3))

最後から3番目以外

• 15
• 14
• 13
• 12
• 11
• 10
• 9
• 8
• 7
• 6
• 5
• 4
• 3
• 2
• 1


5. :nth-child(4n)

先頭から4の倍数

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


6. :nth-last-child(4n)

最後から4の倍数

• 15
• 14
• 13
• 12
• 11
• 10
• 9
• 8
• 7
• 6
• 5
• 4
• 3
• 2
• 1


7. :nth-child(3n+2)

先頭から3の倍数+2

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


8. :nth-last-child(3n+2)

最後から3の倍数+2

• 15
• 14
• 13
• 12
• 11
• 10
• 9
• 8
• 7
• 6
• 5
• 4
• 3
• 2
• 1


9. :nth-child(even)

先頭から数えて偶数番目

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


10. :nth-last-child(even)

最後から数えて偶数番目

• 15
• 14
• 13
• 12
• 11
• 10
• 9
• 8
• 7
• 6
• 5
• 4
• 3
• 2
• 1


11. :nth-child(odd)

先頭から数えて奇数番目

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


12. :nth-last-child(odd)

最後から数えて奇数番目

• 15
• 14
• 13
• 12
• 11
• 10
• 9
• 8
• 7
• 6
• 5
• 4
• 3
• 2
• 1


13. :nth-child(n+4)

先頭から数えて4番目以降

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


14. :nth-last-child(n+4)

最後から数えて4番目以降

• 15
• 14
• 13
• 12
• 11
• 10
• 9
• 8
• 7
• 6
• 5
• 4
• 3
• 2
• 1


15. :nth-child(-n+4)

先頭から数えて4番目以前

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


16. :nth-last-child(-n+4)

最後から数えて4番目以前

• 15
• 14
• 13
• 12
• 11
• 10
• 9
• 8
• 7
• 6
• 5
• 4
• 3
• 2
• 1


17. :nth-child(n+3):nth-child(-n+7)

先頭から3番目～先頭から7番目まで

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


18. :nth-last-child(n+4):nth-last-child(-n+7)

最後から4番目～最後から7番目まで

• 15
• 14
• 13
• 12
• 11
• 10
• 9
• 8
• 7
• 6
• 5
• 4
• 3
• 2
• 1


19. :nth-child(n+2):nth-last-child(n+2)

最初と最後以外

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


20. :first-child

先頭のみ

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


21. :last-child

最後のみ

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15


2. nの計算法

n を 0 から自動的に 1 づつ増加させ、計算結果が 0 以下の場合は無視する。

1. 4n の場合

4*0=0	(結果が0以下なので無視する)
4*1=4
4*2=8
4*3=12
......

2. 3n+2 の場合

3*0+2=2
3*1+2=5
3*2+2=8
3*3+2=11
......

3. n+4 の場合

0+4=4
1+4=5
2+4=6
3+4=7
......

4. -n+4 の場合

-0+4=4
-1+4=3
-2+4=2
-3+4=1
-4+4=0(結果が0以下なので無視する)
-5+4=-1(結果が0以下なので無視する)
......