【解説】CSSの何番目・奇数偶数の指定方法をまとめてみた

記事内に広告を含みます

パソ君

・CSSで2番目だけに指定したい。あれどう指定するんだ？

こんな疑問にお答えします。

上から3つ目だけ、もしくは奇数のみにCSSを指定したいときありますよね。

疑似クラスを用いることはわかるけど、指定方法を忘れた方もいるはず。

ジト

覚えておくべし！

ということで、この記事では「CSSの何番目・奇数偶数の指定方法」をまとめてみました！

この記事でわかること

CSSの何番目・奇数偶数の指定方法

まず自分用と急ぎの方用に、下記に指定内容と疑似クラスをまとめてみました！

順に見ていきましょう。

-childと–of-typeの違いですが、簡単にいうと下記の感じです↓

:〇-child	要素の種類関係なく指定
:〇-of-type	特定の要素からみて指定

これについては下記に詳しく説明しましたので、参考にどうぞ↓

奇数の要素に対しての疑似クラス指定方法がこちら。

/* 奇数の要素 */
:nth-child(odd) {

}

/* 奇数の要素（特定の要素） */
:nth-of-type(odd) {

}

偶数の要素に対しての疑似クラス指定方法がこちら。

/* 偶数の要素 */
:nth-child(even) {

}

/* 偶数の要素（特定の要素） */
:nth-of-type(even) {

}

最初の要素のみに対しての疑似クラス指定方法がこちら。

/* 最初の要素 */
:first-child {

}

/* 最初の要素（特定の要素からみて） */
:first-of-type {

}

最後の要素のみに対しての疑似クラス指定方法がこちら。

/* 最後の要素 */
:last-child {

}

/* 最後の要素（特定の要素からみて） */
:last-of-type {

}

最初の要素から3番目の要素に対しての疑似クラス指定方法がこちら。

/* 最初の要素から3番目の要素 */
:nth-child(3) {

}
 
/* 最初の要素から3番目の要素（特定の要素からみて） */
:nth-of-type(3) {

}

最後の要素から3番目の要素に対しての疑似クラス指定方法がこちら。

/* 最後の要素から3番目の要素 */
:nth-last-child(3) {

}
 
/* 最後の要素から3番目の要素（特定の要素からみて） */
:nth-last-of-type(3) {

}

3の倍数の要素に対しての疑似クラス指定方法がこちら。

/* 3の倍数の要素 */
:nth-child(3n) {

}
 
/* 3の倍数の要素（特定の要素） */
:nth-of-type(3n) {

}

3の倍数＋1の要素に対しての疑似クラス指定方法がこちら。

/* 3の倍数＋1の要素 */
:nth-child(3n+1) {

}
 
/* 3の倍数＋1の要素（特定の要素） */
:nth-of-type(3n+1) {

}

偶数の要素に対しての疑似クラス指定方法がこちら。

/* 3番目から最後の要素まで */
:nth-child(n+3) {

}
 
/* 3番目から最後の要素まで（特定の要素） */
:nth-of-type(n+3) {

}

最後の要素から3番目までに対しての疑似クラス指定方法がこちら。

/* 最後の要素から3番目まで */
:nth-last-child(n+3) {

}
 
/* 最後の要素から3番目まで（特定の要素） */
:nth-last-of-type(n+3) {

}

〇〇以外の要素全てに対しての疑似クラス指定方法がこちら。

/* 指定された要素以外に対して（first-childは例です） */
:not(:first-child) {

}

/* 指定された要素以外に対して（特定の要素からみて、first-childは例です） */
:not(:first-of-type) {

}

「:not」を使うことで、〇〇以外に対して～～という使い方が可能です。

【解説】CSSの何番目・奇数偶数の指定方法をまとめてみた：まとめ