[CSS]:first-childと:last-childで角丸なナビゲーションを作ってみる

角丸は正義だぁ！

と言うことでliを横並びにした角丸なナビゲーションを作ってみました。
本来ならliの最初と最後にクラスでも付けてやりそうなもんですが、CSS2で定義された:first-childと:last-childを使ってみたいと思います。
IE9+です。

サンプルコード

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”NPeZox” default_tab=”result” user=”sagayama”]See the Pen NPeZox by mitsuki sagayama (@sagayama) on CodePen.[/codepen_embed]

first-child擬似クラス

first-child擬似クラスはある要素内で最初に出てくる子要素にスタイルを適用します。

サンプルコードは最初に出てくるliの子要素aの左上と左下の角を10px丸くしてることになります。

同じようにlast-child擬似クラスは最後の子要素になります。

まとめ

便利なんですけどこれもIE9+なんですよね。
ブログネタ的にはいいんですが実用性(IE対応)がないのが玉に傷。たまにね。