nth-childで「何番目から何番目」を指定する方法

nth-childで「何番目から何番目」を指定する方法

要素名:nth-child(n)とは、親要素内で指定した、n番目の子要素にスタイルを適応する時に使用するものです。

この時、例えば2番目から5番目までのように、「~番目から~番目」を指定したい場合の方法です。

下記では、2番目から5番目のli要素に、paddingを指定しています。

2番目から5番目は、nth-child(n + 2):nth-child(-n + 5)と指定すれば適応されます。

 

nth-child(n + 2)とは、2番目以降という意味です。(2番目も含む)

nth-child(-n + 5)とは、5番目以前という意味です。(5番目も含む)

この二つをでつなげて同時に指定し、nth-child(n + 2):nth-child(-n + 5)とすることで、子要素の2番目から5番目を指定できます。