【CSS】何番目・奇数偶数などの要素を指定する疑似クラスのまとめ

 2019年9月25日
CODE
この記事のURLとタイトルをコピーする
スタイルシート(CSS)では、「何番目に」や「奇数だけに」「何番目から何番目まで」など、特定の要素を指定してスタイルを適応させることができます。
上手く使いこなせれば、とても便利で使い勝手がとてもいいです。

いつもその都度ググったりしていたのですが、今回はnth-childnth-of-typeの違い、各疑似クラスの種類を自分用にまとめました。

「nth-child」と「nth-of-type」の違い

はじめにnth-childnth-of-typeの違いについて確認です。
nth-child
親要素内でn番目の子要素に適用
nth-of-type
親要素内でn番目の兄弟関係要素(同じ種類のタグ)に適用
文章だけで説明されても難しいですよね。
サンプルを置いて確認してみます。

まず、以下のHTMLのサンプルを用意します。

nth-child

先ほどのHTMLに、以下のスタイルを適用します。
すると、以下のようにスタイルが表示されます。

1番目のpタグ

2番目のpタグ

spanタグ

3番目のpタグ

4番目のpタグ

5番目のpタグ

親要素内の4番目の子要素に文字色の変更が適用されました。

今回div p:nth-child(4)は、spanタグ含めて4番目の要素に適用されるので、上から4つ目「3番目のpタグ」の文字色が変更されました。
もし4番目の子要素がpタグではなかった場合、スタイルはどこにも適用されることはありません。

nth-of-type

次に先ほどのTHMLに、以下のスタイルを適用します。
すると、以下のようにスタイルが表示されます。

1番目のpタグ

2番目のpタグ

spanタグ

3番目のpタグ

4番目のpタグ

5番目のpタグ

div p:nth-of-type(4)は、兄弟関係の要素(同じ種類のタグ)にスタイルが適用されます。
ここでは、spanタグを除く上から4つ目「4番目のpタグ」の文字色が変更されました。

よく使う疑似クラス

最初の要素だけ

1番最初の要素のみにスタイルを適用します。

最後の要素だけ

最後の要素のみにスタイルを適用します。

奇数の要素だけ

奇数の要素のみに適用します。

偶数の要素だけ

偶数の要素のみに適用します。

上からn番目の要素に

上からn番目の要素にだけ適用します。

下からn番目の要素に

下からn番目の要素にだけ適用します。

数を指定する疑似クラス

3の倍数の要素に

3の倍数の要素にのみ適用します。
(3番目、6番目、9番目…)

3倍数+1の要素に

3の倍数に+1をした数字の要素に適用します。

上からn番目までの全ての要素に

上からn番目までの全ての要素に適用します。

上からn番目以降全部の要素に

上からn番目以降の全ての要素に適用します。

下からn番目までの全ての要素に

下からn番目までの全ての要素に適用します。

下からn番目以降全ての要素に

下からn番目以降の全ての要素に適用します。

意外と便利な疑似クラス

〇〇以外の要素に

指定した要素以外の全てに適用します。

3~6番目の要素のみに

指定した範囲の要素に適用します。

2の倍数で4の倍数でない要素のみに

2の倍数かつ4の倍数以外の要素に適用します。

セクション直下の要素に

セクション直下の要素に適用します。

まとめ

私が使う疑似クラスをまとめてみました。

種類が多いので慣れるまで大変かと思いますが、使いこなせるとコーディングの幅が広がりとても便利です。
機会があれば、是非試してみてください。
この記事のURLとタイトルをコピーする


share