奇数や偶数番目などn個目を装飾できるCSSのnth-child使用サンプル
以下は、記事「奇数や偶数番目などn個目を装飾できるCSSのnth-child」で解説している内容の表示サンプルページです。詳しくは記事本文をご覧下さい。
奇数と偶数で装飾を分ける：
- ここは1番目の項目です。
- ここは2番目の項目です。
- ここは3番目の項目です。
- ここは4番目の項目です。
- ここは5番目の項目です。
- ここは6番目の項目です。
- ここは7番目の項目です。
- ここは8番目の項目です。
3つずつに区切る：
- ここは1番目の項目です。
- ここは2番目の項目です。
- ここは3番目の項目です。
- ここは4番目の項目です。
- ここは5番目の項目です。
- ここは6番目の項目です。
- ここは7番目の項目です。
- ここは8番目の項目です。
4つずつに区切る：
- ここは1番目の項目です。
- ここは2番目の項目です。
- ここは3番目の項目です。
- ここは4番目の項目です。
- ここは5番目の項目です。
- ここは6番目の項目です。
- ここは7番目の項目です。
- ここは8番目の項目です。
最初の3つと残りとで装飾を分ける：
- ここは1番目の項目です。
- ここは2番目の項目です。
- ここは3番目の項目です。
- ここは4番目の項目です。
- ここは5番目の項目です。
- ここは6番目の項目です。
- ここは7番目の項目です。
- ここは8番目の項目です。
最後から3つと残りとで装飾を分ける：
- ここは1番目の項目です。
- ここは2番目の項目です。
- ここは3番目の項目です。
- ここは4番目の項目です。
- ここは5番目の項目です。
- ここは6番目の項目です。
- ここは7番目の項目です。
- ここは8番目の項目です。
最初と最後だけを装飾する：
- ここは1番目の項目です。
- ここは2番目の項目です。
- ここは3番目の項目です。
- ここは4番目の項目です。
- ここは5番目の項目です。
- ここは6番目の項目です。
- ここは7番目の項目です。
- ここは8番目の項目です。