ブログについて
cssで何番目・奇数偶数など要素を指定する方法
2023.12.21
制作
こんにちは、クリエイティブ制作部です。
実装をしている中で「何番目の要素だけにcssを指定したい」や「奇数・偶数でcssを分けて反映させたい」と思うことはありませんか？今回の制作ブログはそんな方に向けた、cssで特定の要素を指定する方法について紹介したいと思います。
どうやって特定の要素を指定するの？
cssで要素を指定するには、以下の表の疑似クラスを使用します。こちらの表はよく使われる疑似クラスですので、覚えておくと便利です。また表のとおり、指定したい要素や規則によって使用する疑似クラスは変わるため、目的に合わせて疑似クラスを設定します。
■疑似クラスとは？
要素の一部や特定の状態に対してcssを反映できるものです。基本的にはセレクタの後ろに追加します。例えば、ホバーの状態に対してcssを指定する「:hover」も同じ疑似クラスと言えます。
| 種類 | イメージ | -child | -of-type |
|---|---|---|---|
| x番目 |  |
nth-child(x) | nth-of-type(x) |
| 最初 |  |
first-child | first-of-type |
| 最後 |  |
last-child | last-of-type |
| 最後から X番目 |
|
nth-last-child(x) | nth-last-of-type(x) |
| 偶数 |  |
nth-child(even) nth-child(2n) |
nth-of-type(even) nth-of-type(2n) |
| 奇数 |  |
nth-child(odd) nth-child(2n-1) |
nth-of-type(odd) nth-of-type(2n-1) |
| xの倍数 | 例）2の倍数の場合 |
nth-child(xn) | nth-of-type(xn) |
| x番目 以降の 要素全て |
例）3番目以降の要素全て |
nth-child(n+x) | nth-of-type(n+x) |
指定方法
指定方法は簡単です。cssの対象のセレクタの後に疑似クラスを記述するだけです。
「:（コロン）」の後ろに対象の疑似クラスを設定します。
＜css＞
セレクタ:nth-of-type(x){
プロパティ:値;
}
「nth-child」「nth-of-type」の違い
ここまで疑似クラスの種類と指定方法について説明しましたが、「nth-child」「nth-of-type」の違いって何だろうと疑問を感じている方もいらっしゃると思います。
ずばり「nth-child」「nth-of-type」の違いは数え方です。少しイメージがつきづらいと思いますので、実際にどのような違いがあるのか以下の例で見ていきます。
では「nth-child」「nth-of-type」を使用して、3番目の要素を赤文字にしています。
＜html＞
<div class=”list”>
<h2>1番目(h2要素)</h2>
<p>2番目(p要素)</p>
<p>3番目(p要素)</p>
<p>4番目(p要素)</p>
<h2>5番目(h2要素)</h2>
</div>
| css | css指定後 | |
|---|---|---|
| .list p:nth-child(3) { color: red; } |
 |
「list」クラス直下の要素（兄弟要素）全ての中の3番目に反映される |
| .list p:nth-of-type(3) { color: red; } |
 |
指定した要素（今回はp要素）の中の3番目に反映される |
つまり簡単にまとめてしまうと、「nth-child」はタグの種類に関わらず全て（兄弟要素）が対象となります。一方「nth-of-type」は指定した要素に対してのみ対象となるということになります。
ではようやく今回の本題である、各疑似クラスが実際にどのように反映されるのかを見ていきます。
x番目
こちらは先述した「nth-child(x)」「nth-of-type(x)」の違いの説明と同様になりますが、先頭からx番目の要素にcssを指定したいという場合に使用します。xには指定したい要素の順番を記述します。今回は例として2番目を指定しております。
＜css＞
.list p:nth-of-type(2){
/* ここにスタイル */
}
.list p:nth-child(2){
/* ここにスタイル */
}
最初
先頭の要素を指定する場合は「first-of-type」「first-child」を使用します。
＜css＞
.list p:first-of-type{
/* ここにスタイル */
}
.list p:first-child{
/* ここにスタイル */
}
最後
いくつかある要素の中で一番最後の要素を指定する場合は「last-of-type」「last-child」を使用します。
＜css＞
.list p:last-of-type{
/* ここにスタイル */
}
.list p:last-child{
/* ここにスタイル */
}
最後からX番目
最後から何番目にcssを指定したい場合は「nth-last-of-type(x)」「nth-last-child(x)」を使用します。
＜css＞
.list p:last-of-type(3){
/* ここにスタイル */
}
.list p:last-child(3){
/* ここにスタイル */
}
偶数
偶数の要素を指定する場合は「nth-of-type(even) / nth-of-type(2n)」「nth-child(even) / nth-child(2n)」を使用します。2つ方法がありますがどちらを指定しても変わりません。
＜css＞
.list p:nth-of-type(even){
/* ここにスタイル */
}
.list p:nth-child(2n){
/* ここにスタイル */
}
奇数
奇数の要素を指定する場合は「nth-of-type(odd) / nth-of-type(2n-1)」「nth-child(odd) / nth-child(2n-1)」を使用します。こちらも2つ方法がありますがどちらを指定しても変わりません。
＜css＞
.list p:nth-of-type(odd){
/* ここにスタイル */
}
.list p:nth-child(2n-1){
/* ここにスタイル */
}
xの倍数
特定の倍数の要素に対してcssを指定する場合は「nth-of-type(xn)」「nth-child(xn)」を使用します。「x」に倍数したい数字を入れます。3の倍数にする場合は「nth-of-type(3n)」「nth-child(3n)」、4の倍数にする場合は「nth-of-type(4n)」「nth-child(4n)」となります。
以下は2の倍数の場合です。
＜css＞
.list p:nth-of-type(2n){
/* ここにスタイル */
}
.list p:nth-child(2n){
/* ここにスタイル */
}
x番目以降の要素全て
x番目以降の要素全てにcssを指定する場合は「nth-of-type(n+x)」「nth-child(n+x)」を使用します。以下は3番目以降の場合になります。「n」に数字を当て込むと、3番目以降の数値が算出されると思います。
＜css＞
.list p:nth-of-type(n+3){
/* ここにスタイル */
}
.list p:nth-child(n+3){
/* ここにスタイル */
}
まとめ
今回は知っておくと便利な特定の要素を指定する疑似クラスをご紹介しました。
ただ便利な反面デメリットもあります。それは項目が追加や削除された際に、順番が変わってしまうので指定したcssが違う部分に反映されてしまうことです。「first-of-type」や「last-of-type」はあまり影響ないと思いますが、なるべく変更がない項目を指定するときに使用することをおすすめします。
今回の記事が少しでも参考になれば嬉しいです。最後までお読みいただきありがとうございました。