CSS3のnth-childやnth-last-childを使って途中の連続した要素を指定する


CSS3から追加されたnth-childやnth-last-childという擬似クラス。前者が前からの要素を指定する擬似クラスで後者が後ろからの要素を指定する擬似クラスとなります。
この二つのよく見る例が、:nth-child(3)と一つだけの要素を指定したものや、:nth-child(2n)と偶数番目の要素だけ指定したものをよく見ますが、連続した要素を指定することもできます。
例えば、最初の5つを指定したい場合は下記のようになります。

上記の書き方だと、liタグの最初の5つの要素の背景を赤にするとなります。逆に、6つ目以降だと下記のようになります。

後ろからで考えたい場合は、nth-childの部分をnth-last-childとするだけです。

ところで、上記の例は確実に最初か最後を指定しなけければいけませんが、途中の連続した要素を指定したい場合ということが、稀にあるかもしれません(あまりないとは思いますが)。
続きを読む