奇数や偶数番目などn個目を装飾できるCSSのnth-child使用サンプル

奇数と偶数で装飾を分ける:
  1. ここは1番目の項目です。
  2. ここは2番目の項目です。
  3. ここは3番目の項目です。
  4. ここは4番目の項目です。
  5. ここは5番目の項目です。
  6. ここは6番目の項目です。
  7. ここは7番目の項目です。
  8. ここは8番目の項目です。
3つずつに区切る:
  1. ここは1番目の項目です。
  2. ここは2番目の項目です。
  3. ここは3番目の項目です。
  4. ここは4番目の項目です。
  5. ここは5番目の項目です。
  6. ここは6番目の項目です。
  7. ここは7番目の項目です。
  8. ここは8番目の項目です。
4つずつに区切る:
  1. ここは1番目の項目です。
  2. ここは2番目の項目です。
  3. ここは3番目の項目です。
  4. ここは4番目の項目です。
  5. ここは5番目の項目です。
  6. ここは6番目の項目です。
  7. ここは7番目の項目です。
  8. ここは8番目の項目です。
最初の3つと残りとで装飾を分ける:
  1. ここは1番目の項目です。
  2. ここは2番目の項目です。
  3. ここは3番目の項目です。
  4. ここは4番目の項目です。
  5. ここは5番目の項目です。
  6. ここは6番目の項目です。
  7. ここは7番目の項目です。
  8. ここは8番目の項目です。
最後から3つと残りとで装飾を分ける:
  1. ここは1番目の項目です。
  2. ここは2番目の項目です。
  3. ここは3番目の項目です。
  4. ここは4番目の項目です。
  5. ここは5番目の項目です。
  6. ここは6番目の項目です。
  7. ここは7番目の項目です。
  8. ここは8番目の項目です。
最初と最後だけを装飾する:
  1. ここは1番目の項目です。
  2. ここは2番目の項目です。
  3. ここは3番目の項目です。
  4. ここは4番目の項目です。
  5. ここは5番目の項目です。
  6. ここは6番目の項目です。
  7. ここは7番目の項目です。
  8. ここは8番目の項目です。
解説ジャンル名URL
HTML5https://allabout.co.jp/gm/gl/19850/
CSS3https://allabout.co.jp/gm/gl/21423/
アクセス制限https://allabout.co.jp/gm/gl/2368/
表示の高速化https://allabout.co.jp/gm/gl/23091/
フォームの活用https://allabout.co.jp/gm/gl/2360/
レイアウトの調整https://allabout.co.jp/gm/gl/2362/
画像の表示https://allabout.co.jp/gm/gl/2356/

HTML5の解説
https://allabout.co.jp/gm/gl/19850/

CSS3の解説
https://allabout.co.jp/gm/gl/21423/

アクセス制限の解説
https://allabout.co.jp/gm/gl/2368/

表示の高速化の解説
https://allabout.co.jp/gm/gl/23091/

フォームの活用の解説
https://allabout.co.jp/gm/gl/2360/

レイアウトの調整の解説
https://allabout.co.jp/gm/gl/2362/

画像の表示の解説
https://allabout.co.jp/gm/gl/2356/