css ○○番目系疑似クラスの指定パターンまとめ

MARKLEAPS

2022.06.24

よく使うけどついつい忘れがちな
○○番目系疑似クラスの使い方をまとめました。

最初

:first-child

ul li:first-child {
	color: red;
}

ul li:first-child {

color: red;

}

最後

:last-child

ul li:last-child {
	color: red;
}

ul li:last-child {

color: red;

}

奇数番目

:nth-child(odd)

ul li:nth-child(odd) {
	color: red;
}

ul li:nth-child(odd) {

color: red;

}

偶数番目

:nth-child(even)

ul li:nth-child(even) {
	color: red;
}

ul li:nth-child(even) {

color: red;

}

X番目

:nth-child(X)

ul li:nth-child(3) {
	color: red;
}

ul li:nth-child(3) {

color: red;

}

最後からX番目

:nth-last-child(X)

ul li:nth-last-child(2) {
	color: red;
}

ul li:nth-last-child(2) {

color: red;

}

Xの倍数

:nth-child(Xn)

ul li:nth-child(3n) {
	color: red;
}

ul li:nth-child(3n) {

color: red;

}

:nth-child(2n)で指定した場合
2番目、4番目、6番目～
:nth-child(3n)で指定した場合
3番目、6番目、9番目～
に適用されます。
1行に3枚ずつ画像が並ぶリストなど、使える場面がかなり多いです。

最初からX番目まで

:nth-child(-n+X)

ul li:nth-child(-n+3) {
	color: red;
}

ul li:nth-child(-n+3) {

color: red;

}

:nth-child(-n+3) と指定した場合、
上から3番目までの要素全部にスタイルを適用します。

新着記事の最初の3件に「new」の文字を表示させたい時などに使えます。

最後からX番目まで

:nth-last-child(-n+X)

ul li:nth-last-child(-n+3) {
	color: red;
}

ul li:nth-last-child(-n+3) {

color: red;

}

:nth-last-child(-n+3) と指定した場合、
最後から3番目までの要素全部にスタイルを適用します。

最後からX番目まで

:nth-last-child(-n+X)

ul li:nth-last-child(-n+3) {
	color: red;
}

ul li:nth-last-child(-n+3) {

color: red;

}

:nth-last-child(-n+3) と指定した場合、
最後から3番目までの要素全部にスタイルを適用します。

親要素内で兄弟関係にある要素でn番目

:nth-of-type(X)

table td:nth-of-type(1) {
	color: red;
}

table td:nth-of-type(1) {

color: red;

}

table表でtdの最初の要素にのみスタイルを指定したい時等に使えます。

CSS

よく読まれている関連記事

CSSアニメーション　2つの機能