CSSのnth-of-type(n)やnth-child(n)を使って”特定の範囲内だけ”指定する方法

nth-of-type(n)やnth-child(n)は「nの倍数番目」や「n番目以降」の要素を指定する際に便利ですが、今回は「特定の範囲内だけ」を指定したい場合はどうすればいいのかを説明します。

要素の「特定の範囲内だけ」を指定する

今回はnth-of-type(n)を使って10個のボタンのうち「特定の範囲内だけ」を指定したいと思います。

ボタンのコードはこちら。

<div>
   <button>button1</button>
   <button>button2</button>
   <!--以下同じ-->
</div>

button {
   display: inline-block;
   float: left;
   width: 40%;
   height: 40%;
   padding: 10px 0;
   margin: 5px;
   border: 2px solid #5D6562;
   border-radius: 5px;
   background-color: #fff;
}

6番目以降のbuttonだけを指定

まずは6番目以降のbuttonだけを指定してみます。

○番目以降の要素を指定する場合は、「n+○」と書きます。

nに何番目の要素が入ろうと、指定される範囲は必ず○番目以降の要素になるわけです。

button:nth-of-type(n+6) {
   background-color: #b2c8f5;/* 青 */
}

5番目以前の要素だけを指定

今度は逆に5番目以前の要素だけを指定してみます。

○番目以前の要素だけを指定する場合は、「-n+○」と書きます。

button:nth-of-type(-n+5) {
   background-color: #b2c8f5;/* 青 */
}

3番目～6番目だけを指定

上記の2つのを組み合わせれば特定の範囲内だけを指定することができます。

○番目～△番目までを指定する場合は「:nth-of-type(n+○):nth-of-type(-n+△)」と書きます。：は２回使います。

実際に3番目から6番目を指定してみます。

button:nth-of-type(n+3):nth-of-type(-n+6) {
   background-color: #b2c8f5;/* 青 */
}

また、使い道があるかわかりませんが、これを2つ合わせると特定の範囲をいくつか指定することができます。

button:nth-of-type(n+2):nth-of-type(-n+4),
button:nth-of-type(n+7):nth-of-type(-n+9) {
   background-color: #b2c8f5;/* 青 */
}

以上、nth-of-type(n)を使って特定の範囲内だけを指定する方法でした。

今回はnth-of-type(n)を使いましたが、nth-child(n)を使っても同じことができます。

是非参考にしてみてください。