Lesson 06 :nth-child疑似クラスでコーディングをシンプルに - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編

2011.7.27 WED

Webデザイン
表現&技法の
新・スタンダード

Lesson 6

:nth-child疑似クラスで
コーディングをシンプルに

	制作・文	平澤隆（underHat）
＞	To Use	CSS \| JavaScript
＞	Browser	IE 9over \| Firefox 3.5over \| Safari 4over

制作を効率的に行う上で覚えておきたいセレクタの1つが、CSS3で定義された:nth-child()疑似クラスだ。これを使いこなすことで、リストをゼブラ模様にすることも簡単になり、煩雑なclass付けも必要なくなる。

01

このセレクタはある要素に隣接した、最初から数えてn番目にあたる子要素にスタイルを適用させることができる。なお、n番目というのは隣接しているすべての要素になるので、その位置に別の要素があると適用されない。この「n番目」には、odd（奇数行）やeven（偶数行）といった指定も可能で、これによりリストやテーブルなどを交互に色を変えることができる【1-1】。

【1-1】水色は固定となり、黄色が繰り返される（または引き伸ばされる）部分。グレーはボックスの背景になる

【1-1】水色は固定となり、黄色が繰り返される（または引き伸ばされる）部分。グレーはボックスの背景になる

【1-1】:nth-child()疑似クラスで、リストを交互に色分けしている
（http://zero.css-happylife.com/property/）

02

:nth-child()疑似クラスを実際に適用させるには、【2-1】のように記述する。この指定により、3番目のli要素にのみ指定したスタイルが適用され、緑背景で白文字になる【2-2】。

【2-1】CSSソース。最も基本的な書き方

【2-2】3番目にだけスタイルが適用されている

03

先の例は最も基本的な書き方だが、前述のように交互に色分けするには、【3-1】のように()内の値を even とすれば偶数行だけにスタイルが適用される。これをブラウザで確認すると偶数行だけ背景が青になり、文字が白になるのが確認できる【3-2】。奇数行に適用させたい場合にはeven を odd とすればよい。これまではli要素に直接classを振ったりする必要があったが、そのような必要がなくなりメンテナンス性もよくなる。

【3-1】CSSソース。evenとすることで、偶数行にスタイルが適用される

【3-2】偶数行だけスタイルが適用されている

04

:nth-child()疑似クラスは、交互に色を変えるだけでなく、レイアウトでも大きな力を発揮する。たとえば、フロートさせたボックスのコンテンツ量が違い、ボックスの高さが変わってしまうような場合、レイアウトが破綻してしまうことがある【4-1】【4-2】。

【4-1】CSSソース

【4-2】最初のボックスだけテキストが多いため、レイアウトが崩れている

05

これまでは崩れたレイアウトを整えるのに、3番目や4番目の要素にclassを当てて調整したり、行単位でdiv要素で囲んだりして対処していたが、:nth-child()疑似クラスを利用すれば【4-1】のソースに【5-1】のように追記するだけで簡単に解決できる【5-2】。

【5-1】CSSソース。3n+1 とすると3の倍数 + 1 の要素にスタイルが適用される

【5-2】4番目のボックスが1番目のボックスの下に配置されている。（赤のボーダーはわかりやすくするために指定している）

06

:nth-child() 疑似クラスを使用するときの注意点として、Internet Explorerが9しか対応していない点があげられる【6-1】。対応させる場合はJavaScriptなどを使う必要がある。jQueryを使っていれば、1行書くだけでクラスを付与させることができるので対応も容易だ【6-2】【6-3】。