CodeLog

○番目の要素を選択する

CSS

複数の兄弟要素から○番目などの要素を指定する方法を解説します。忘れたり混乱することもよくあるものなので当ページを参考にしてください。

最初

li:first-child{
	background: #99ccff;
}
li:nth-child(1){
	background: #99ccff;
}
1
2
3
4
5
6

最初の要素を選択する場合、:first-childもしくは:nth-child(1)の擬似クラスで選択できます。:nth-child()は前から数えて○番目の要素を選択できる擬似クラスです。

最後

li:last-child{
	background: #99ccff;
}
li:nth-last-child(1){
	background: #99ccff;
}
1
2
3
4
5
6

最後の要素を選択する場合、:last-childもしくは:nth-last-child(1)の擬似クラスで選択できます。:nth-last-child()は後ろから数えて○番目の要素を選択できる擬似クラスです。

奇数

li:nth-child(odd){
	background: #99ccff;
}
li:nth-child(2n+1){
	background: #99ccff;
}
1
2
3
4
5
6

奇数の要素を選択する場合、:nth-child(odd)もしくは:nth-child(2n+1)の擬似クラスで選択できます。"2n+1"は、"2の倍数に1を足した番目"という意味になります。

偶数

li:nth-child(even){
	background: #99ccff;
}
li:nth-child(2n){
	background: #99ccff;
}
1
2
3
4
5
6

偶数の要素を選択する場合、:nth-child(even)もしくは:nth-child(2n)の擬似クラスで選択できます。"2n"は、"2の倍数の番目"という意味になります。

前から○番目

li:nth-child(3){
	background: #99ccff;
}
1
2
3
4
5
6

前から○番目の要素を選択する場合、:nth-child(○)の擬似クラスで選択できます。最初の要素が１番目です。

後ろから○番目

li:nth-last-child(3){
	background: #99ccff;
}
1
2
3
4
5
6

後ろから○番目の要素を選択する場合、:nth-last-child(○)の擬似クラスで選択できます。最後の要素が１番目です。

○番目以外

li:not(:nth-child(3)){
	background: #99ccff;
}
1
2
3
4
5
6

前から○番目以外の要素を選択する場合、:not(:nth-child(○))の擬似クラスで選択できます。:not()で"以外"という指定ができます。:not(:nth-last-child(○))という指定を行えば、後ろから○番目以外を選択することができます。

○番目以前

li:nth-child(-n+3){
	background: #99ccff;
}
1
2
3
4
5
6

前から○番目以前の要素を選択する場合、:nth-child(-n+○)の擬似クラスで選択できます。ちなみに後ろから○番目以前を選択する場合は、:nth-last-child(n+○)となります。

○番目以降

li:nth-child(n+4){
	background: #99ccff;
}
1
2
3
4
5
6

前から○番目以降の要素を選択する場合、:nth-child(n+○)の擬似クラスで選択できます。ちなみに後ろから○番目以降を選択する場合は、:nth-last-child(-n+○)となります。

○番目から●番目

li:nth-child(n+2):nth-child(-n+5){
	background: #99ccff;
}
1
2
3
4
5
6

○番目から●番目の要素を選択する場合は、:nth-child(n+○):nth-child(-n+●)の擬似クラスで選択できます。ちなみに後ろから数えて○番目から●番目の要素を選択する場合は、:nth-last-child(n+○):nth-last-child(-n+●)となります。