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番目を指定

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の倍数を指定

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を指定

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 最後から偶数を指定

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 最後から奇数を指定

CSS

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

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

目次へ

※ちなみに…

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

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

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

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

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番目以前）を指定

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番目までを指定

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;
}

目次へ