疑似クラス:nth-childでさまざまな要素を指定する

2024年10月15日　Posted　野々瀨(フロントエンドエンジニア)

疑似クラス:nth-child()は、同列要素（兄弟要素）に対して、並び条件を指定して要素を限定することのできる疑似クラスです。今回はそんな:nth-child()のさまざまな使い方をご紹介しようと思います。

なお、:nth-last-child()など類似する疑似クラスについて、一部を除き触れませんのでご了承ください。

n番目

引数に番号を指定することで、指定した番号の要素を選択します。次のコードでは、.foo要素の子要素のうち、三つ目の要素を選択しています。

.foo > :nth-child(3) {
	background-color: #486cf2;
}

引数に倍数nを指定することで、指定した倍数の要素を選択します。次のコードでは、.foo要素の子要素のうち、三つ目、六つ目、九つ目と3の倍数の要素を選択しています。

.foo > :nth-child(3n) {
	background-color: #486cf2;
}

引数にevenキーワードまたはoddキーワードを指定することで、偶数または奇数の要素を選択します。evenキーワードが偶数、oddキーワードが奇数です。

.foo > :nth-child(even) {
	background-color: #486cf2;
}

引数にn+番号を指定することで、指定した番号以降の要素を選択します。次のコードでは、.foo要素の子要素のうち、三つ目以降の要素を選択しています。

.foo > :nth-child(n+3) {
	background-color: #486cf2;
}

引数に-n+番号を指定することで、最初の要素から指定した番号の要素までを選択します。次のコードでは、.foo要素の子要素のうち、最初の三つ目の要素を選択しています。

.foo > :nth-child(-n+3) {
	background-color: #486cf2;
}

引数に番号n+番号を指定することで、指定した番号以降から数えた倍数の要素を選択します。次のコードでは、.foo要素の子要素のうち、二つ目以降から数えた3の倍数の要素を選択しています。

.foo > :nth-child(3n+2) {
	background-color: #486cf2;
}

なお開始位置を後にずらしますが、倍数の場合は負の要素も含んで選択されることにご注意ください。

引数に番号n-番号を指定することで、指定した番号を前にずらした状態の倍数の要素を選択します。次のコードでは、.foo要素の子要素のうち、二つ目前から数えた3の倍数の要素を選択しています。

.foo > :nth-child(3n-2) {
	background-color: #486cf2;
}

引数にofフィルターを使用しますとセレクターを制限することができます。次のコードでは、.foo要素の子要素のうち、.baz要素の二つ目の要素を選択しています。

.foo > :nth-child(2 of .baz) {
	background-color: #486cf2;
}

また次のコードでは、tr要素が非表示以外のtd要素から偶数のtd要素を選択しています。

tr:nth-child(even of :not([hidden])) td {
	background-color: #486cf2;
}

なお、ofフィルターの後に指定するセレクターはコンマで区切ることで、複数の対象の中から選択することができます。次のコードでは、.foo要素の子要素のうち、.bar要素と.baz要素を合わせた中から二つ目の要素を選択しています。

.foo > :nth-child(2 of .bar, .baz) {
	background-color: #486cf2;
}

疑似クラス:has()と組み合わせると、子要素の数に応じてスタイルを制御することができます。次のコードでは、.foo要素の子要素が三つの場合にスタイルを当てます。

.foo:has(> :nth-child(3):last-child) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

要素が五つあるとき：

要素が三つあるとき：

例えばp:nth-child(2)といったような指定をした場合、「兄弟要素の二つ目にあるp要素」という意味になります。そのためdivなど兄弟要素として違う名称の要素が存在している場合は、思ったように選択できないといったことが起きます。

.foo p:nth-child(2) {
	background-color: #486cf2;
}

そういう時は:nth-of-type()を使用するか、ofフィルターを使用することで解決することが可能です。

.foo p:nth-of-type(2) {
	background-color: #486cf2;
}

なお、:nth-child()やnth-of-type()などの疑似クラスは、要素名以外の指定があった場合は、指定していないのと同じ兄弟要素全てを対象とします。