nth-childで「何番目から何番目」を指定する方法
要素名:nth-child(n)とは、親要素内で指定した、n番目の子要素にスタイルを適応する時に使用するものです。
この時、例えば2番目から5番目までのように、「~番目から~番目」を指定したい場合の方法です。
下記では、2番目から5番目のli要素に、paddingを指定しています。
2番目から5番目は、nth-child(n + 2):nth-child(-n + 5)と指定すれば適応されます。
1 2 3 4 5 6 7 8 | <ul> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul> |
1 2 3 | li:nth-child(n + 2):nth-child(-n + 5) { padding: 0 15px; } |
nth-child(n + 2)とは、2番目以降という意味です。(2番目も含む)
nth-child(-n + 5)とは、5番目以前という意味です。(5番目も含む)
この二つを:でつなげて同時に指定し、nth-child(n + 2):nth-child(-n + 5)とすることで、子要素の2番目から5番目を指定できます。