Lesson 07 :nth-of-typeで効率的に色分けする - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編

2011.7.27 WED

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

Lesson 7

:nth-of-typeで
効率的に色分けする

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

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

CSS3では多くの疑似クラスが追加されている。その中でも比較的実用性が高いセレクタが:nth-of-type()疑似クラスだ。定義リストのように複数の要素で構成される場合でも、交互に色分けすることが可能になる。

01

:nth-of-type()疑似クラスは、ある要素の同じ子要素（兄弟関係の要素）のうち、最初から数えてn番目に当たる要素にスタイルを適用することができる。似た機能の:nth-child()疑似クラスは兄弟関係すべての要素を数えたのに対して、:nth-oftype()疑似クラスは同じ要素のみを数えてn番目の要素にスタイルを適用する点が異なる【1-1】【1-2】【1-3】。

【1-1】CSSソース。どちらのセレクタも3番目にスタイルが適用されるように指定している

【1-2】HTMLでのマークアップ。このような場合、3番目として期待するのはQ3のdt要素だろう

【1-3】:nth-child()疑似クラスはdd要素も1として数えるためQ2のdt要素にスタイルが適用される。:nthof-type()疑似クラスは、dt要素の数を数えるため3番目のdt要素にスタイルが適用される

02

dl 要素を交互に色分けする場合、同じ要素のみを数える:nth-of-type()疑似クラスを利用することで簡単に実現できる【2-1】【2-2】。HTMLは前述の【1-2】と同じだ。

【2-1】CSSソース。dt要素とdd要素が偶数行の場合に背景色を変更している

【2-2】交互に色分けされたのが確認できる

03

定義リストに限らず、見出しなどでも:nth-of-type()疑似クラスを活用すれば途中に別の要素があっても意図した通りにスタイルを適用することができる。たとえば【3-1】【3-2】のようなマークアップをした場合、h2要素とh2要素の間にさまざまな要素が存在するが、h2要素のみ数えるため、HTML側でclass属性を指定せずにデザインを変更することが可能になる【3-3】。

最後に注意点として、:nth-of-type()疑似クラスは:nth-child()疑似クラスと同様にInternet Explorer は9しか対応していない。対応させる場合はJavaScriptなどを使う必要がある。