【CSS】何番目・奇数偶数などの要素を指定する疑似クラスのまとめ
2019年9月25日
CODE
この記事のURLとタイトルをコピーする
スタイルシート（CSS）では、「何番目に」や「奇数だけに」「何番目から何番目まで」など、特定の要素を指定してスタイルを適応させることができます。
上手く使いこなせれば、とても便利で使い勝手がとてもいいです。
いつもその都度ググったりしていたのですが、今回はnth-childとnth-of-typeの違い、各疑似クラスの種類を自分用にまとめました。
文章だけで説明されても難しいですよね。
サンプルを置いて確認してみます。
まず、以下のHTMLのサンプルを用意します。
すると、以下のようにスタイルが表示されます。
親要素内の4番目の子要素に文字色の変更が適用されました。
今回div p:nth-child(4)は、spanタグ含めて4番目の要素に適用されるので、上から4つ目「3番目のpタグ」の文字色が変更されました。
もし4番目の子要素がpタグではなかった場合、スタイルはどこにも適用されることはありません。
すると、以下のようにスタイルが表示されます。
div p:nth-of-type(4)は、兄弟関係の要素（同じ種類のタグ）にスタイルが適用されます。
ここでは、spanタグを除く上から4つ目「4番目のpタグ」の文字色が変更されました。
（3番目、6番目、9番目…）
種類が多いので慣れるまで大変かと思いますが、使いこなせるとコーディングの幅が広がりとても便利です。
機会があれば、是非試してみてください。
上手く使いこなせれば、とても便利で使い勝手がとてもいいです。
いつもその都度ググったりしていたのですが、今回はnth-childとnth-of-typeの違い、各疑似クラスの種類を自分用にまとめました。
もくじ
「nth-child」と「nth-of-type」の違い
はじめにnth-childとnth-of-typeの違いについて確認です。- nth-child
- 親要素内でn番目の子要素に適用
- nth-of-type
- 親要素内でn番目の兄弟関係要素（同じ種類のタグ）に適用
サンプルを置いて確認してみます。
まず、以下のHTMLのサンプルを用意します。
|
1 2 3 4 5 6 7 8 |
<div> <p>1番目のpタグ</p> <p>2番目のpタグ</p> <h6>h6タグ</h6> <p>3番目のpタグ</p> <p>4番目のpタグ</p> <p>5番目のpタグ</p> </div> |
nth-child
先ほどのHTMLに、以下のスタイルを適用します。|
1 2 3 4 |
div p:nth-child(4) { color: red; font-weight: bold; } |
1番目のpタグ
2番目のpタグ
spanタグ3番目のpタグ
4番目のpタグ
5番目のpタグ
今回div p:nth-child(4)は、spanタグ含めて4番目の要素に適用されるので、上から4つ目「3番目のpタグ」の文字色が変更されました。
もし4番目の子要素がpタグではなかった場合、スタイルはどこにも適用されることはありません。
nth-of-type
次に先ほどのTHMLに、以下のスタイルを適用します。|
1 2 3 4 |
div p:nth-of-type(4) { color: red; font-weight: bold; } |
1番目のpタグ
2番目のpタグ
spanタグ3番目のpタグ
4番目のpタグ
5番目のpタグ
ここでは、spanタグを除く上から4つ目「4番目のpタグ」の文字色が変更されました。
よく使う疑似クラス
最初の要素だけ
1番最初の要素のみにスタイルを適用します。|
1 2 3 4 5 6 7 8 |
/* 最初の要素 */ :first-child { プロパティ: 値; } /* 同じ種類で順番が最初の要素 */ :first-of-type { プロパティ: 値; } |
最後の要素だけ
最後の要素のみにスタイルを適用します。|
1 2 3 4 5 6 7 8 |
/* 最後の要素 */ :last-child { プロパティ: 値; } /* 同じ種類で順番が最後の要素 */ :last-of-type { プロパティ: 値; } |
奇数の要素だけ
奇数の要素のみに適用します。|
1 2 3 4 5 6 7 8 |
/* 順番が奇数の要素 */ :nth-child(odd) { プロパティ: 値; } /* 同じ種類で順番が奇数の要素 */ :nth-of-type(odd) { プロパティ: 値; } |
偶数の要素だけ
偶数の要素のみに適用します。|
1 2 3 4 5 6 7 8 |
/* 順番が偶数の要素 */ :nth-child(even) { プロパティ: 値; } /* 同じ種類で順番が偶数の要素 */ :nth-of-type(even) { プロパティ: 値; } |
上からn番目の要素に
上からn番目の要素にだけ適用します。|
1 2 3 4 5 6 7 8 9 |
/* 順番が2番目の要素 */ :nth-child(2) { プロパティ: 値; } /* 同じ種類で順番が2番目の要素 */ :nth-of-type(2) { プロパティ: 値; } |
下からn番目の要素に
下からn番目の要素にだけ適用します。|
1 2 3 4 5 6 7 8 9 |
/* 順番が最後から2番目の要素 */ :nth-last-child(2) { プロパティ: 値; } /* 同じ種類で順番が最後から2番目の要素 */ :nth-last-of-type(2) { プロパティ: 値; } |
数を指定する疑似クラス
3の倍数の要素に
3の倍数の要素にのみ適用します。（3番目、6番目、9番目…）
|
1 2 3 4 5 6 7 8 9 |
/* 順番が3の倍数の要素 */ :nth-child(3n) { プロパティ: 値; } /* 同じ種類で順番が3の倍数の要素 */ :nth-of-type(3n) { プロパティ: 値; } |
3倍数+1の要素に
3の倍数に+1をした数字の要素に適用します。|
1 2 3 4 5 6 7 8 9 |
/* 順番が3の倍数+1の要素 */ :nth-child(3n+1) { プロパティ: 値; } /* 同じ種類で順番が+1の倍数の要素 */ :nth-of-type(3n+1) { プロパティ: 値; } |
上からn番目までの全ての要素に
上からn番目までの全ての要素に適用します。|
1 2 3 4 5 6 7 8 9 |
/* 順番が上から4番目の全ての要素 */ :nth-child(-n+4) { プロパティ: 値; } /* 同じ種類で順番が上から4番目の全ての要素 */ :nth-of-type(-n+4) { プロパティ: 値; } |
上からn番目以降全部の要素に
上からn番目以降の全ての要素に適用します。|
1 2 3 4 5 6 7 8 9 |
/* 順番が上から4番目以降の全ての要素 */ :nth-child(n+4) { プロパティ: 値; } /* 同じ種類で順番が上から4番目以降の全ての要素 */ :nth-of-type(n+4) { プロパティ: 値; } |
下からn番目までの全ての要素に
下からn番目までの全ての要素に適用します。|
1 2 3 4 5 6 7 8 9 |
/* 順番が下から5番目の全ての要素 */ :nth-last-child(-n+5) { プロパティ: 値; } /* 同じ種類で順番が下から5番目の全ての要素 */ :nth-last-of-type(-n+5) { プロパティ: 値; } |
下からn番目以降全ての要素に
下からn番目以降の全ての要素に適用します。|
1 2 3 4 5 6 7 8 9 |
/* 順番が下から5番目以降の全ての要素 */ :nth-last-child(n+5) { プロパティ: 値; } /* 同じ種類で順番が下から5番目以降の全ての要素 */ :nth-last-of-type(n+5) { プロパティ: 値; } |
意外と便利な疑似クラス
〇〇以外の要素に
指定した要素以外の全てに適用します。|
1 2 3 4 |
/* 指定以外の全ての要素 */ :not(:first-child) { プロパティ: 値; } |
3～6番目の要素のみに
指定した範囲の要素に適用します。|
1 2 3 4 |
/* 3〜6番目の特定の要素 */ :nth-child(n+3):nth-child(-n+6) { プロパティ: 値; } |
2の倍数で4の倍数でない要素のみに
2の倍数かつ4の倍数以外の要素に適用します。|
1 2 3 4 |
/* 2の倍数で4の倍数でない特定の要素 */ :nth-child(2n):not(:nth-child(4n)) { プロパティ: 値; } |
セクション直下の要素に
セクション直下の要素に適用します。|
1 2 3 4 |
/* セクション直下の要素 */ section > *:not(:first-child) { プロパティ: 値; } |
まとめ
私が使う疑似クラスをまとめてみました。種類が多いので慣れるまで大変かと思いますが、使いこなせるとコーディングの幅が広がりとても便利です。
機会があれば、是非試してみてください。
この記事のURLとタイトルをコピーする