何番目の子要素を何とかする…nth-child

何番目の子要素を何とかする…nth-child
Free-Photos from Pixabay

2020.12.04（更新日：2021.02.13）

cssを記述する時「何番目は色を変えて…」とする場合などに有効なスグレモノ。
idやclassセレクタ付けまくらなくとも済むので、htmlコードもスッキリ！
ただ「n」をどう書くんだっけ？といつも忘れるのでまとめ。

この記事は１年以上経過しています。内容的に古い場合があります。

「親から見て何番目」と言うのが基本的なので「親の直下要素」を指定するようにすること。

最初と最後の要素を指定

/* 最初の子要素を指定２パターン */
selector:nth-child(1) { ... } /* 頭から数えた番号を括弧に */
selector:first-child { ... }
/* 最後の子要素を指定２パターン */
selector:nth-last-child(1) { ... } /* 尻から数えた番号を括弧に */
selector:last-child { ... }

最初と最後だけならnth-childでなく「first / last」の方がわかりやすい。

偶数、奇数要素を指定

/* 偶数要素を指定 */
selector:nth-child(even) { ... }
/* 奇数要素を指定 */
selector:nth-child(odd) { ... }

表組みやリストの要素を交互に色替えする場合に便利。

n番目の要素を指定

/* 最初から数えて3番目の要素を指定 */
selector:nth-child(3) { ... }
/* 最後から数えて3番目の要素を指定 */
selector:nth-last-child(3) { ... }

単純にプロパティの数字を変えればOK。

複数指定は…

/* 最初から数えて３番目と５番目の要素を指定 */
selector:nth-child(3),
selector:nth-child(5) { ... }

繋げることなくカンマで区切り、繰り返しで記述。コロンで繋げると意味が変わってくるので注意。

倍数指定。n個区切りで指定

/* ３の倍数で指定 */
selector:nth-child(3n) { ... }

上の例だと「３番目、６番目、９番目…」と指定出来る。n個区切りでなんかしたい時とか便利。

倍数指定しn個区切り。さらにその区分内の要素を指定

文章だとわかりずらいが「３つ区切りでその中の２番目を指定」なんて意味。

/* ３の倍数で指定しその中の２番目指定 */
selector:nth-child(3n+2) { ... }