│ネットワークの明日を創る。その7今回は「nth-child()で要素の指定」です。今までのデモページで使用していましたが、nth-child()についてもう少し掘り下げていきたいと思います。今までですとclassを加えて装飾していましたが、nth-child()を使うことで便利に、かつ綺麗なソースで構築する事が出来ます。今回は前回使ったナビゲーションで説明します。ナビゲーションの順番によって要素の色を変更し、1番左の要素の横幅を半分にします。ひとつ目の要素はfirst-childで指定することも出来ます。CSSは下の方に記述しています。DEMOページはこちら奇数行、偶数行に指定するテーブルで奇数行と偶数行で色を変えたりすることが良くあります。行がたくさんある場合やプログラム等で動的に行数が増える場合に全て設定するのは大変です。そこでnth-child()の括弧内をodd(奇数行)、even(偶数行)とし、それぞれ装飾することが出来ます。DEMOページはこちら他にも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を細く設定してソースが汚くなってしまうこと無くマークアップ出来るのは技術者としても気持ちが良いです。