先日開催された「CSS Niteビギナーズ：HTML5+CSS3」でCSSセレクタのことをお話ししました。
その中で紹介したちょっと複雑なセレクタです。

li:nth-child(even):nth-last-child(2)

上記のセレクタを紹介したわけですが、こういうふうに書くと li が奇数個の場合だけ後ろから2番目の li をセレクトできます。

li が10個だった場合

まず、li が10個あった場合で考えてみましょう。
:nth-child(even)で偶数番目の li をセレクトして背景を赤くした場合、以下のスクリーンショットのように偶数番目の背景が赤くなりますね。

さて、このときに:nth-last-child(2)になっているのはどいつかというと、前から9番目の li でして、そいつは偶数番目の li にはなりません。
li が8個だとしても12個だとしても、偶数個の場合にはやはり:nth-last-child(2)は奇数番目になってしまうというわけです。

li が9個だった場合

次に、li が9個だった場合を考えてみましょう。
:nth-child(even)で偶数番目の li をセレクトして背景を青くした場合は以下のようになります。

このときに:nth-last-child(2)に注目してみると8番目の li ということで先に指定したli:nth-child(even)でもあるという状態になっていますね。
これで晴れて:nth-child(even):nth-last-child(2)で li をセレクトできるわけです。

このようにセレクタを利用するといろんな要素をセレクトできますので、皆さんもドシドシセレクトしていきましょー。