Nedia What's up!

ネディアのエンジニアによるIT技術やサービスの紹介・検証などをお届け!

【CSS】nth-child()で要素の指定

CSSの小技 その7
今回は「nth-child()で要素の指定」です。
今までのデモページで使用していましたが、nth-child()について
もう少し掘り下げていきたいと思います。

用途

テーブルやナビゲーションや横並びなどで、何番目かの要素に特定の装飾をしたいときに、
今までですとclassを加えて装飾していましたが、nth-child()を使うことで便利に、かつ綺麗なソースで構築する事が出来ます。

実装方法

css07-01

今回は前回使ったナビゲーションで説明します。
ナビゲーションの順番によって要素の色を変更し、1番左の要素の横幅を半分にします。
ひとつ目の要素はfirst-childで指定することも出来ます。
CSSは下の方に記述しています。

HTML

CSS

奇数行、偶数行に指定する

css07-02

テーブルで奇数行と偶数行で色を変えたりすることが良くあります。
行がたくさんある場合やプログラム等で動的に行数が増える場合に全て設定するのは大変です。
そこでnth-child()の括弧内をodd(奇数行)、even(偶数行)とし、それぞれ装飾することが出来ます。

HTML

CSS

他にも

3番目以降全てを指定する場合:nth-child(n+3)
3番目までを指定する場合:nth-child(-n+3)
1番目と3の倍数(3,6,9)を指定する場合:nth-child(3n+1)
最後の要素を指定する場合:nth-last-child(1)
最後からn番目の要素を指定する場合:nth-last-child(n)
とnと数字の組み合わせでいろいろと指定することが出来ます。
classを細く設定してソースが汚くなってしまうこと無くマークアップ出来るのは技術者としても気持ちが良いです。