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

SHARE

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

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

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

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

2番目から5番目は、nth-child(n + 2):nth-child(-n + 5)と指定すれば適応されます。
HTML
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>
css
CSS
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番目を指定できます。