今更ですが、nth-child の使い方について。
これまで、偶数番目の要素とか、奇数目の要素とか、X個目の要素などを指定するために使ったことはあったのですが、X個目以降という指定が出来るとは知りませんでした。
element:nth-child(n+5)
このように指定すると、５個目以降の要素を指定することができます。
先頭の４個を表示して、５個目以降を非表示にするなんてことも簡単にできるわけですね。
ちなみに、
element:nth-child(-n+3)
とすると、先頭から３つ目までを指定したことになります。
ほうほう、これはなかなか便利じゃないですか。
「nth-child()」 の「n」って何なの？
「nth-child」の「n」は、0以上の整数を表しているそうです。
つまり「n+5」は、「5,6,7,…….」を表すことになるので「5以上」という意味になります。
「2n」は「0,2,4,…」になるので偶数になり、「2n+1」は「1,3,5,…」になるので奇数を表すことになるわけですね。
なるほど、今になって理解しました。
では、一体どれくらい複雑な計算式に対応しているのだろうかと調べたところ、記述できるのは以下の計算式のみでした。
element:nth-child(an + b) { style properties }
まあ、これだけで十分といえば十分ですかね。
そんなわけで、これまで何となく使っていたけれども、ちょっとだけモヤモヤしていたのがスッキリと晴れました。
ホームページの制作（デザイン・コーディング・プログラミング）に加え、ネットショップの販売促進に関するアドバイスも致します。 20年以上に渡って実際にネットショップを運営した経験を生かし、聞きかじりではない実績を伴ったノウハウを、自分の言葉でお伝えいたします。 プログラミングの経験は30年以上。HTML、CSS、JavaScript、TypeScript、Vue、NuxtJS、Node.js、MySQL、MongoDB、Elasticsearch、WordPress、PHP、Docker、Electronなど、幅広く対応します。
コメント