nth-child() でX個目以降を指定する方法

今更ですが、nth-child の使い方について。

これまで、偶数番目の要素とか、奇数目の要素とか、X個目の要素などを指定するために使ったことはあったのですが、X個目以降という指定が出来るとは知りませんでした。

このように指定すると、5個目以降の要素を指定することができます。
先頭の4個を表示して、5個目以降を非表示にするなんてことも簡単にできるわけですね。

ちなみに、

とすると、先頭から3つ目までを指定したことになります。
ほうほう、これはなかなか便利じゃないですか。

「nth-child()」 の「n」って何なの?

「nth-child」の「n」は、0以上の整数を表しているそうです。

つまり「n+5」は、「5,6,7,…….」を表すことになるので「5以上」という意味になります。

「2n」は「0,2,4,…」になるので偶数になり、「2n+1」は「1,3,5,…」になるので奇数を表すことになるわけですね。

なるほど、今になって理解しました。

では、一体どれくらい複雑な計算式に対応しているのだろうかと調べたところ、記述できるのは以下の計算式のみでした。

まあ、これだけで十分といえば十分ですかね。

そんなわけで、これまで何となく使っていたけれども、ちょっとだけモヤモヤしていたのがスッキリと晴れました。

スポンサーリンク
広告(大)
広告(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
広告(大)