【セレクタ８選】リストの2番目、最初、最後などをcssで指定する

cssを使ってリスト(liタグ)の特定の行だけにstyleを適用できます。

(1)リストの上から2番目にcssを適用・指定したい場合

li:nth-child(2)

(2)リストの最後だけstyleを適用したい場合

li:last-child

(3)リストの最初だけstyleを適用したい場合

li:first-child

(5)リストの下から2番目にcssを適用・指定したい場合

li:nth-last-child(2)

だいたいこれだけでなんとかできます。

以下、具体的な記述方法をご紹介します。

リストの上から2番目だけを、cssで指定する

【CSS】

ul li:nth-child(2){ ほにゃほにゃ }

ul li:nth-child(2)でリストの特定の行(上から2番め)を選択しています。

リストの最後だけを、cssで指定する

【CSS】

ul li:last-child{
	ほにゃほにゃ
}

ul li:last-childでリストの最後の行を選択しています。

リストの最初だけを、cssで指定する

【CSS】

ul li:first-child{ ほにゃほにゃ }

ul li:first-childでリストの最初の行を選択しています。

リストの下から2番目を、cssで指定する

【CSS】

ul li:nth-last-child(2){ ほにゃほにゃ }

ul li:nth-last-child(2)でリストの下から2番目の行を選択しています。

補足

今回はulリストのみでセレクタを紹介していますが、dlやolやtableなどのリストであっても同様に実装可能です。

dl dd:last-child { ●●● }
ol li:last-child { ●●● }
table tr td:first-child{ ●●● }

のように記述します。

その他セレクタのご紹介

他にも使用頻度の高い便利なセレクタの記述がありますので、さらっとご紹介します。

リストの奇数番だけを、cssでほにゃほにゃする場合

【CSS】

ul li:nth-child(odd) { ほにゃほにゃ }

li:nth-child(2n + 1)でも可能

リストの偶数番だけを、cssでほにゃほにゃする場合

【CSS】

ul li:nth-child(even) { ほにゃほにゃ }

li:nth-child(2n)

まだまだあります！次は「●番目から●番目まで」のセレクタや「●番目以降」などのちょっとマニアックなセレクタをご紹介します。

☆番目から◎番目までを、cssでほにゃほにゃする場合

【CSS】

ul li:nth-child(n + ☆):not(:nth-child(n + ◎ + 1)) { ほにゃほにゃ }

具体的に数字を入れると、次のようになります。
◎は+1されますのでご注意ください。

5番めから10番めまでを選択する場合の記述

ul li:nth-child(n + 5):not(:nth-child(n + 9 + 1)) {
	ほにゃほにゃ
}

●番目以前を、cssでほにゃほにゃする場合

【CSS】

ul li:nth-child(n + ●){ ほにゃほにゃ }

具体的に数字を入れると、次のようになります。

5番め以降をほにゃほにゃします

ul li:nth-child(n + 5){
	ほにゃほにゃ
}

セレクタを使う際の注意点

セレクタを使用していると、その後リストが増えたり、減ったりした時にcssの適用位置がずれてしまうということがあります。

例えばリストが10個ほどあって、上からul li:nth-child(1)～ul li:nth-child(10)と、ガチガチに指定している場合などは修正箇所が結構増えてしまいます。

HTMLコーダーの方がプログラマにcssを渡す時、このような記述は嫌がられることもあります。

リストの増減が予想される箇所に多用するのは控えたほうがいいでしょう。