【CSS】リストの奇数・偶数・指定番目などを指定して装飾する方法
2018/01/29
リストタグの背景色を塗るとか、ボーダーをつけるといった装飾方法のまとめ。
たまに必要になるので毎回調べるので、自分用のメモとして忘備録としてポストします。
リストタグの装飾方法のまとめ
リストの背景を塗ってみる
基本のHTML
下記のような何の変哲もないリストに対して装飾してみます。
|
1 2 3 4 5 6 7 |
<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> </ul> |
1.奇数番目を装飾
|
1 2 3 |
li:nth-child(odd){ background: #edd4e1; } |
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
2. 偶数番目を装飾
|
1 2 3 |
li:nth-child(even){ background: #edd4e1; } |
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
3. 最初を装飾
|
1 2 3 |
li:first-child{ background: #edd4e1; } |
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
4. 最後を装飾
|
1 2 3 |
li:last-child{ background: #edd4e1; } |
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
5. 上からn番目を装飾
※例として4番目を指定してみます
|
1 2 3 |
li:nth-child(4){ background: #edd4e1; } |
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
6. 下からn番目を装飾
※例として下から2番目を指定
|
1 2 3 |
li:nth-last-child(2){ background: #edd4e1; } |
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
7. 上からn個の要素だけを装飾
※例として上から3個を指定
|
1 2 3 |
li:nth-child(-n+3) { background: #edd4e1; } |
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
8. 下からn個の要素だけを装飾
※例として下から3個を指定
|
1 2 3 |
li:nth-last-child(-n+3) { background: #edd4e1; } |
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5