順番(n番目)による指定
- 1番目の項目です
- 2番目の項目です
- 3番目の項目です
- 4番目の項目です
- 5番目の項目です
- 6番目の項目です
<ul> <li>1番目の項目です</li> <li>2番目の項目です</li> <li>3番目の項目です</li> <li>4番目の項目です</li> <li>5番目の項目です</li> <li>6番目の項目です</li> </ul>
ul li:nth-child(1) {
color: red;
}
ul li:nth-child(2) {
color: fuchsia;
}
ul li:nth-child(3) {
color: purple;
}
ul li:nth-child(4) {
color: green;
}
ul li:nth-child(5) {
color: lime;
}
ul li:nth-child(6) {
color: blue;
}
一番基本的な使い方は、要素の並び順を数字で指定する方法です。:nth-child(n)のように、参照したい要素の順番を数字で指定するだけでOKです。
要素を数える場合は「1からスタート」となります。
要素を数える場合は「1からスタート」となります。
キーワードによる指定
- 1番目の項目です
- 2番目の項目です
- 3番目の項目です
- 4番目の項目です
- 5番目の項目です
- 6番目の項目です
同上
/* 奇数 */
ul li:nth-child(odd) {
color: red;
}
/* 偶数 */
ul li:nth-child(even) {
color: blue;
}
「奇数」と「偶数」はキーワードを利用して指定することが可能です。
倍数指定(Xn)
(2の倍数の要素を指定)
(3の倍数の要素を指定)
- 1番目の項目です
- 2番目の項目です
- 3番目の項目です
- 4番目の項目です
- 5番目の項目です
- 6番目の項目です
- 7番目の項目です
(3の倍数の要素を指定)
- 1番目の項目です
- 2番目の項目です
- 3番目の項目です
- 4番目の項目です
- 5番目の項目です
- 6番目の項目です
- 7番目の項目です
同上
/* 2の倍数の要素を指定 */
ul li:nth-child(2n) {
color: red;
}
/* 3の倍数の要素を指定 */
ul li:nth-child(3n) {
color: red;
}
指定方法は「順番による指定」とほぼ同じですが、「n」キーワードとセットにすることで、式(乗算)の結果をもとに要素を指定することができます。
倍数指定(Xn)- 2
- 1番目の項目です
- 2番目の項目です
- 3番目の項目です
- 4番目の項目です
- 5番目の項目です
- 6番目の項目です
- 7番目の項目です
同上
/* 奇数の要素を指定 */
ul li:nth-child(2n + 1) {
color: red;
}
指定できる演算式は乗算だけに限らず、四則演算なら利用可能です。
「奇数」の指定は演算式によって指定することも可能です。
「奇数」の指定は演算式によって指定することも可能です。
n番目まで(-n + Y)、n番目以降(n + Y)
(先頭から3つ目までの要素を指定)
(先頭から4つ目以降の要素を指定)
- 1番目の項目です
- 2番目の項目です
- 3番目の項目です
- 4番目の項目です
- 5番目の項目です
- 6番目の項目です
- 7番目の項目です
(先頭から4つ目以降の要素を指定)
- 1番目の項目です
- 2番目の項目です
- 3番目の項目です
- 4番目の項目です
- 5番目の項目です
- 6番目の項目です
- 7番目の項目です
同上
/* 先頭から3つ目までの要素を指定 */
ul li:nth-child(-n + 3) {
color: blue;
}
/* 先頭から4つ目以降の要素を指定 */
ul li:nth-child(n + 4) {
color: green;
}
「n」に0以上の数字を代入していって、結果が正になる範囲が選択されます。
n番目まで(-n + Y)、n番目以降(n + Y)- 応用
(3つ目から5つ目までの要素を指定)
- 1番目の項目です
- 2番目の項目です
- 3番目の項目です
- 4番目の項目です
- 5番目の項目です
- 6番目の項目です
- 7番目の項目です
同上
/* 3つ目から5つ目までの要素を指定 */
#box06 ul li:nth-child(n + 3):nth-child(-n + 5) {
color: red;
}
2つの条件の組み合わせから「3つ目から5つ目までの要素を指定」という結果になります。
一番最後の要素を指定
- 1番目の項目です
- 2番目の項目です
- 3番目の項目です
- 4番目の項目です
- 5番目の項目です
- 6番目の項目です
- 7番目の項目です
同上
/* 一番最後の要素を指定 */
ul li:nth-last-child(1) {
color: purple;
}
:nth-child()擬似クラスで指定できないパターンの1つ目は最後の要素ですが、:nth-last-child()擬似クラスでは簡単に取得可能です。
「後ろからn番目」としたければ、擬似クラスで指定する数値を変更すれば任意に変更可能です。
「後ろからn番目」としたければ、擬似クラスで指定する数値を変更すれば任意に変更可能です。
後ろからn番目まで(-n + Y)
(後ろから3つ目までの要素を指定)
(後ろから4つ目以前の要素を指定)
- 1番目の項目です
- 2番目の項目です
- 3番目の項目です
- 4番目の項目です
- 5番目の項目です
- 6番目の項目です
- 7番目の項目です
(後ろから4つ目以前の要素を指定)
- 1番目の項目です
- 2番目の項目です
- 3番目の項目です
- 4番目の項目です
- 5番目の項目です
- 6番目の項目です
- 7番目の項目です
同上
/* 後ろから3つ目までの要素を指定 */
#box08 ul li:nth-last-child(-n + 3) {
color: purple;
}
/* 後ろから4つ目以前の要素を指定 */
#box08 ul.ul2 li:nth-last-child(n + 4) {
color: red;
}
もう1つのパターンは後ろから範囲を指定した要素の選択です。
指定方法、考え方は:nth-child()擬似クラスの時の「先頭からn番目まで」と同じです。
指定方法、考え方は:nth-child()擬似クラスの時の「先頭からn番目まで」と同じです。