更新日:

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

cssのセレクタを使って、リスト(listタグ)の2番目、最初、最後などを思いのままに選択し、cssでコントロールする方法をご紹介します。

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

 

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

 

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

 

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

 

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

 

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

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

 

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

【CSS】

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

 

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

【CSS】

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

 

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

【CSS】

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

 

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

【CSS】

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


補足

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

のように記述します。

 

その他セレクタのご紹介

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

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

【CSS】

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

 

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

【CSS】

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

 

 

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

 

 

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

【CSS】

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

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

 

 

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

【CSS】

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

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

 

 

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

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

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

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

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

 

コメントを残す

おすすめ記事

スポンサーリンク

スポンサーリンク