HTML,CSS

HTML,CSS

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

2018/01/29

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

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

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

基本のHTML

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

1.奇数番目を装飾

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

2. 偶数番目を装飾

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

3. 最初を装飾

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

4. 最後を装飾

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

5. 上からn番目を装飾

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

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

6. 下からn番目を装飾

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

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

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

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

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

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

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

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
夜は短し歩けよ乙女 (角川文庫)

夜は短し歩けよ乙女 (角川文庫)

森見 登美彦

価格 : 605円

     

-HTML,CSS
-, , ,