【CSS】リストの奇数・偶数・指定番目などを指定して装飾する方法

リストタグの背景色を塗るとか、ボーダーをつけるといった装飾方法のまとめ。
たまに必要になるので毎回調べるので、自分用のメモとして忘備録としてポストします。

リストタグの装飾方法のまとめ

リストの背景を塗ってみる

基本のHTML

下記のような何の変哲もないリストに対して装飾してみます。

[html]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

[/html]

1.奇数番目を装飾

[css]
li:nth-child(odd){
background: #edd4e1;
}
[/css]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

2. 偶数番目を装飾

[css]
li:nth-child(even){
background: #edd4e1;
}
[/css]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

3. 最初を装飾

[css]
li:first-child{
background: #edd4e1;
}
[/css]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

4. 最後を装飾

[css]
li:last-child{
background: #edd4e1;
}
[/css]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

5. 上からn番目を装飾

※例として4番目を指定してみます

[css]
li:nth-child(4){
background: #edd4e1;
}
[/css]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

6. 下からn番目を装飾

※例として下から2番目を指定

[css]
li:nth-last-child(2){
background: #edd4e1;
}
[/css]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

7. 上からn個の要素だけを装飾

※例として上から3個を指定

[css]
li:nth-child(-n+3) {
background: #edd4e1;
}
[/css]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

8. 下からn個の要素だけを装飾

※例として下から3個を指定

[css]
li:nth-last-child(-n+3) {
background: #edd4e1;
}
[/css]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

-HTML,CSS
-リスト, 偶数, 奇数, 指定番目