li要素でよく使うやつ
メニューやらフローやらli要素と併せてよく使う、擬似要素 first-child と last-child。これを使うとhtmlのコードをごちゃごちゃさせずに装飾できます。
何もしない状態
- 1番目
- 2番目
- 3番目
first-childで最初の要素『1番目』を飾ってみる
- 1番目
- 2番目
- 3番目
last-childで最後の要素『3番目』を飾ってみる
- 1番目
- 2番目
- 3番目
これに同じく擬似要素のbeforeやらafterやらも付けちゃうと更に便利！表現の幅が広がりますね。
- 1番目にはafterだけ
- 2番目には両方つく
- 3番目にも両方つく
- 4番目にはbeforeだけ
これを応用すれば『↓』を記述せずにフローを作れるという便利っぷり。
- まずはお見積もり
- 内容を検討
- 申し込み
（この例はちょっと雑だが。。。）
ちなみに、奇数指定 :nth-child(odd) / nth-child(2n+1)、偶数指定 :nth-child(even) / nth-child(2n)、n番目指定:nth-child(n)という方法もある。動的な時に便利ね。