nth-child() 疑似クラスとは

英文ですが，詳細は以下から。W3Cの Working Draft（草案）ですので，今後変更されることがあるかもしれません。

• Selectors - 6.6.5. Structural pseudo-classes - :nth-child() pseudo-class

その要素が何番目の子要素かによって，該当するものにだけ，CSSをあてることができます。

たとえば，セレクタにul li:nth-child(2n)，またはul li:nth-child(even)というふうに記述すると，リストの偶数番目のアイテムに対してCSSを適用できます。奇数番目ならul li:nth-child(2n+1)，またはul li:nth-child(odd)となります。

ul li:nth-child(4n+1)と書くと，4つおきに1, 5, 9, 13番目の li要素が該当することになります。ul li:nth-child(6)と書くと，6番目の li要素だけが該当します。

nth-child() 疑似クラスに対応しているブラウザも出てきました。

• Safari 3
• Opera 9.50β

（Firefox 3RCでは後述のCSSは効きませんでした。IE 8βは未確認）

使用例

Safari 3で表示したキャプチャを載せておきます。

カレンダー：土・日・祝日に色を

table.calendar tr th:nth-child(6) {
  background: #99F;
}

table.calendar tr th:nth-child(7) {
  background: #F99;
}

table.calendar tr td:nth-child(6) {
  color: #009;
}

table.calendar tr td:nth-child(7),
table.calendar tr:nth-child(5) td:nth-child(1) {
  color: #900;
}

1行目の曜日は th でマークアップしてあります。この6番目（土）と7番目（日）は，背景色を変えて指定しています。

日の数字は td でマークアップしてあります。6番目と7番目のテキスト色を指定しています。

祝日の「海の日」は7月の第3月曜です。tr:nth-child(5) td:nth-child(1)，つまり5番目の tr の中の1番目の td がこれにあたります。

カレンダー：休業日に背景色を

上のCSSに以下を追加します。

table.calendar tr td:nth-child(7),
table.calendar tr:nth-child(2n+1) td:nth-child(4) {
  background: #FCC;
}

table.calendar tr:nth-child(6) td:nth-child(7) {
  background: #FFF;
}

td:nth-child(7)は日曜日に該当します。tr:nth-child(2n+1) td:nth-child(4)は奇数番目の tr の中の4番目の td にあたり，隔週木曜日に背景色が入ります。

27日の下は空欄になっていますが，ここにも背景色が入ってしまうので，#FFFを指定しています。

floatを4つおきにclear

ul, li のリストでマークアップしてあります。li にはそれぞれ商品画像・商品名・価格が入っています。

<ul class="product-list">
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span></li>
  ...

ul.product-list {
  overflow: hidden;
  width: 430px;
  border-top: solid 3px #666;
}

ul.product-list li {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
  width: 100px;
}

ul.product-list li:nth-child(4n+1) {
  clear: left;
  margin-left: 0;
}

li:nth-child(4n+1)は4つずつ並べたときのいちばん最初の li にあたります。これを clear して，左の margin を 0 にしています。きれいに4つずつ並びます。

floatを3つおきにclear

HTMLはそのまま，CSSをちょっと書き換えるだけでこんなふうにもなります。

ul.product-list {
  overflow: hidden;
  width: 320px;
  border-top: solid 3px #666;
}

ul.product-list li {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
  width: 100px;
}

ul.product-list li:nth-child(3n+1) {
  clear: left;
  margin-left: 0;
}

書き換えたのは，ul の width の値と nth-child の 3n+1 のところだけです。同じ要領で，540px，5n+1 と書き換えると5つずつ並べることができますね。

nth-child() が使いたい理由

floatさせて4つずつ並べる場合，1, 5, 9, ...番目の li に class="head-item" などと class をふり，これにCSSをあてる...という方法でもできないことはありません。

表に1行おきに背景色を入れるような場合も，奇数番目の tr に class="odd" を，偶数番目の tr に class="even" をふっておいたり...。

これらの方法だと，途中に商品を追加する（あるいは削除する）とか，表の途中のデータを1行そっくり抜く（あるいは挿入する）というとき，それ以降にある class を書き直さなくてはなりません。

nth-child() が使えるようになれば，こうした class をふる必要はなくなります。HTML上で追加しようと削除しようと順序を入れ替えようと，何番目になるかを気にすることはありません。

また，HTMLを固定したまま，見栄えをいろいろに変化させるときにも便利です。4つずつ並んでいたものを3つずつにする，1行おきに背景を入れていたものを3行ごとにする，ということもCSSの対応だけですみます。

参考

サンプルページを用意しましたので，あわせてご覧ください。

• CSS - nth-child()疑似クラス | Try | d-spica

関連

• Re: CSSによるデザインワークと相性のよいHTMLって？