CSSの:nth-childと:nth-last-child擬似クラスの使用例

Tips

CSSの:nth-childと:nth-last-child擬似クラスの使用例

今更な内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。CSSの擬似クラスにある:nth-child:nth-last-childの使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。

説明時に利用しているサンプルイメージやコードは、ul内に10個のli要素を記述し、デフォルトで青いボックスが並んでいる見た目になるようCSSを指定しています。
それを:nth-child:nth-last-childを使って指定されたものが赤いボックスに変化させています。
実際のブラウザ表示を見たい場合はCodePenにデモをアップしておいたのでこちらをご覧ください。

CSSの:nth-childと:nth-last-child擬似クラスの使用例 目次

  1. 先頭 or 最後からx番目を指定
  2. 先頭 or 最後からxの倍数を指定
  3. 先頭 or 最後から指定数+α or -αを指定
  4. 先頭 or 最後から偶数を指定
  5. 先頭 or 最後から奇数を指定
  6. 先頭 or 最後からx番目以降を指定
  7. 先頭 or 最後からx番目まで(x番目以前)を指定
  8. 先頭 or 最後から指定範囲を指定

1. 先頭 or 最後からx番目を指定

基本的な使い方で、:nth-child(x) または :nth-last-child(x)の「x」の部分に数値を記述すれば「先頭 or 最後からx番目に」という指定になります。

例:先頭 or 最後から3番目を指定

先頭 or 最後からx番目を指定

CSS

/* 先頭から... */
ul li:nth-child(3) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(3) {
  background-color: #e74c3c;
}

目次へ

2. 先頭 or 最後からxの倍数を指定

:nth-child(xn) または :nth-last-child(xn)のように記述し、「x」の部分に数値を記述することで「先頭 or 最後からxの倍数に」という指定になります。

例:先頭 or 最後から3の倍数を指定

先頭 or 最後からxの倍数を指定

CSS

/* 先頭から... */
ul li:nth-child(3n) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(3n) {
  background-color: #e74c3c;
}

目次へ

3. 先頭 or 最後から指定数+α or -αを指定

上で数値や倍数で指定する方法を紹介しましたが、そこへ更に「+1」や「-2」といったように数値を足したり引いたりする指定方法もあり、上で紹介したものでは指定できないとか指定できたとしても複数記述しないといけないのがこの方法を使うことで1行で指定可能になります。

例:先頭 or 最後から3の倍数+1を指定

先頭 or 最後から指定数+α or -αを指定

1・4・7・10というように、上で紹介した倍数指定では指定できず、数値指定の場合は複数指定しないといけなかったものが1行で指定できます。

CSS

/* 先頭から... */
ul li:nth-child(3n+1) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(3n+1) {
  background-color: #e74c3c;
}

目次へ

4. 先頭 or 最後から偶数を指定

evenと記述することで 2・4・6・8・10... というように偶数を指定することができます。

例:先頭 or 最後から偶数を指定

先頭 or 最後から偶数を指定

CSS

/* 先頭から... */
ul li:nth-child(even) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(even) {
  background-color: #e74c3c;
}

目次へ

5. 先頭 or 最後から奇数を指定

oddと記述することで 1・3・5・7・9... というように奇数を指定することができます。

例:先頭 or 最後から奇数を指定

先頭 or 最後から奇数を指定

CSS

/* 先頭から... */
ul li:nth-child(odd) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(odd) {
  background-color: #e74c3c;
}

目次へ

※小ネタ:evenとoddの覚え方

偶数を表す「even」と奇数を表す「odd」ですが、どちらがどちらか混乱してしまったりよく間違ってしまうという人は「evenは4文字なので偶数指定、oddは3文字なので奇数指定」と考えると覚えやすいです。

6. 先頭 or 最後からx番目以降を指定

:nth-child(n+x) または :nth-last-child(n+x)のように記述し、「x」の部分に数値を記述することで「先頭 or 最後からx番目以降に」という指定になります。

例:先頭 or 最後から3番目以降を指定

先頭 or 最後からx番目以降を指定

CSS

/* 先頭から... */
ul li:nth-child(n+3) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(n+3) {
  background-color: #e74c3c;
}

目次へ

7. 先頭 or 最後からx番目まで(x番目以前)を指定

:nth-child(-n+x) または :nth-last-child(-n+x)のように記述し、「x」の部分に数値を記述することで「先頭 or 最後からx番目まで(x番目以前)に」という指定になります。

例:先頭 or 最後から3番目まで(3番目以前)を指定

先頭 or 最後からx番目まで(x番目以前)を指定

CSS

/* 先頭から... */
ul li:nth-child(-n+3) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(-n+3) {
  background-color: #e74c3c;
}

目次へ

8. 先頭 or 最後から指定範囲を指定

先頭からの場合は:nth-child(n+x):nth-child(-n+x)を、最後からの場合は:nth-last-child(n+x):nth-last-child(-n+x)を組み合わせて記述することで、「先頭 or 最後から○番目~○番目までに」という感じで範囲指定することができます。

例:先頭から3番目~先頭から6番目までを指定
最後から3番目~最後から6番目までを指定

先頭 or 最後から指定範囲を指定

CSS

/* 先頭から... */
ul li:nth-child(n+3):nth-child(-n+6) {
  background-color: #e74c3c;
}

/* 最後から... */
ul li:nth-last-child(n+3):nth-last-child(-n+6) {
  background-color: #e74c3c;
}

目次へ


以上、CSSの:nth-child:nth-last-child擬似クラスの使用例でした。
特に6、7、8で紹介した指定方法などは覚えておくと無駄なクラスを付けなくてすんだり、CSSも短い記述にすることができるので覚えておくと便利だと思います。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.