N番目の要素にスタイル指定する方法

投稿者: | 2019年7月18日

テーブルセルやリストで交互にスタイルを変更する場合(背景色や文字色を変える等)のCSS指定方法について。

CSSのnth-childで偶数/奇数行などn番目を装飾する方法

「nth-child疑似クラス」というのを使うらしい。
このあたり、まったく勉強不足。

例えば3の倍数ごとにスタイルを変える場合

li:nth-child(3n) {
   /* 3の倍数(=3,6,9……)番目だけに適用されるCSS */
   スタイル指定
}

奇数・偶数でスタイルを変える場合

:nth-child(even) {
   偶数のスタイル
}
:nth-child(odd) {
   奇数のスタイル
}

その他のスタイル指定についても解説アリ。
有難い!

All aboutのホームページ制作、いろいろ役立ちそうなので、後でじっくり読もう。

カテゴリー: CSS