リストや表などのデザインで威力を発揮する「last-child」という疑似クラス。
CSSをしばらく勉強していても、この疑似クラスというのが理解しにくかった。
「疑似ってなんだよ！」
といつも思っていたものだ(笑)
しかし、ちゃんと理解してしまえばそんな難しくなかった。
今回は疑似クラスの中の「last-child」についてプログラミング小僧が理解したことを整理したいと思う。
last-childとは？
last-childは「該当要素の最後だけにCSSを適用」するための疑似クラスのことだ。
- last=最後
- child=子
だからlast-child=「最後の子」と訳せるから、何となく意味はわかる。
ちなみに要素というのは<li>~</li>の部分のことを言う。
例えば、リストの最後の文字だけ赤くしたい場合。
1 2 3 4 5 6 7 | 【HTML】 <ul> <li>テレビ</li> <li>ソファ</li> <li>テーブル</li> <li>机</li> </ul> |
上記コードを実行すると、プラウザ（Google Chromeなど）には
- テレビ
- ソファ
- テーブル
- 机
このように表示される。
この最後の「机」の文字色だけ赤くしたい場合にCSSで
1 2 3 4 | 【CSS】 li { color:red; } |
としてしまうと
- テレビ
- ソファ
- テーブル
- 机
このようにすべてが赤文字になってしまう。でもlast-childを使って下記のようにCSSを書けば
1 2 3 4 | 【CSS】 li:last-child { color:red; } |
- テレビ
- ソファ
- テーブル
- 机
と狙った通りに li 要素の最後である「机」だけを赤文字にすることが出来るのだ。
last-childの書き方は？
last-childの書き方は簡単だ。
上図のようにlast-childを適用したいタグ名（今回の例だとliタグ）やclass名の直後に：（コロン）とlast-childをつければOKだ。
なぜlast-childを使う必要があるの？
last-childは便利だ。
でも
「なんでlast-childを使う必要があるの？classで指定すれば同じじゃん。」
という疑問を持っていたが、実務でエンジニアを経験していないプログラミング小僧の浅はかな考えだったようだ。
プロのエンジニアの方に話を聞く限り、last-childに始まる疑似クラスを上手に活用すればCSSの量を減らすことが出来て、楽だからだそうだ。
確かにlast-childを使わなければ、class名が1つ増える。
そういった場面が多数あれば、class名がどんどん増えていき、管理が大変になる（class名が被らないように気を付けるなど）。
でも、last-childなどの疑似クラスを使えばそれを減らせる。
HPのデザインをただ整えるだけだったらlast-childはそこまで必要ないのかもしれない。
しかし、実務でプログラミングを扱っている人にとっては
「その後の管理や修正をいかに楽にするか？」
という問題がいつもつきまとうのだ。
そういった問題を解決・改善するためにlast-childなどの疑似クラスがあるというのも1つの理由なのだろう。
関連記事はこちら！
