CSSの:nth-child()は同じ親の中で要素の位置を数える

CSSの:nth-child()は、同じ親要素に入っている子要素を、文書に書かれた順番で数えて選びます。oddなら奇数番目、evenなら偶数番目、3n+1なら1番目から三つおきです。

間違えやすいのは、指定した要素だけを先に集めて数えるわけではない点です。途中に別の種類の要素があれば、その要素も子要素として順番に含まれます。同じ種類の要素だけを数えたい場合は、:nth-of-type()を検討します。

oddとevenは一つおきの行を選ぶ

表の行へ交互に背景色を付けるなら、次のように指定できます。

tbody tr:nth-child(odd) {
  background-color: #f3f3f3;
}

tbody tr:nth-child(even) {
  background-color: #fff;
}

oddは2n+1、evenは2nと同じ意味です。最初の子要素は0番目ではなく1番目として数えます。そのため、oddが選ぶのは1、3、5番目、evenが選ぶのは2、4、6番目です。

背景色を交互にしても、表の見出しとデータの関係はHTMLで示す必要があります。色は読みやすさを助ける表示であり、th要素やscope属性の代わりではありません。

An+Bは間隔と開始位置を分けて読む

W3CのSelectors Level 3は、:nth-child(An+B)を、親の中で前にAn+B-1個の兄弟要素がある要素として定義しています。実装時には、Aを間隔、Bを開始位置として読むと整理しやすくなります。

/* 1、4、7、10番目を選ぶ */
.news li:nth-child(3n+1) {
  clear: left;
}

/* 先頭から3番目までを選ぶ */
.news li:nth-child(-n+3) {
  font-weight: bold;
}

/* 5番目だけを選ぶ */
.news li:nth-child(5) {
  border-bottom: 0;
}

これらは構文を説明する仮例です。三列配置なら必ず3n+1にする、先頭三件なら必ず太字にする、という意味ではありません。HTMLの並びと、どの変化を利用者へ伝えるかを先に決めます。

nには0以上の整数が順に入ります。3n+1では、n=0のとき1、n=1のとき4、n=2のとき7になります。-n+3では3、2、1が正の位置として残るため、先頭三件を選べます。

:nth-child()は別の要素も含めた位置で判断する

次のHTMLでは、二つ目のp要素は、親の子要素としては3番目です。

<section>
  <h2>見出し</h2>
  <p>一つ目の段落</p>
  <p>二つ目の段落</p>
</section>

ここで二つのセレクタは、同じ結果になりません。

p:nth-child(2) {
  color: #900;
}

p:nth-of-type(2) {
  font-weight: bold;
}

p:nth-child(2)は、親の2番目の子であり、かつp要素であるものを選びます。このHTMLでは一つ目の段落が該当します。p:nth-of-type(2)は、同じ親にあるp要素のうち2番目を選ぶため、二つ目の段落が該当します。

「二つ目の段落」を選びたいのか、「親の2番目にある段落」を選びたいのかを、CSSを書く前に言葉で決めてください。

クラス名が付いた要素だけを数える指定ではない

次の指定は、.itemが付いた要素を三つずつ数えるものではありません。

.item:nth-child(3n) {
  margin-right: 0;
}

親の3、6、9番目にある子要素のうち、.itemも持つ要素だけが選ばれます。途中に見出しや広告枠など別の子要素を挿入すれば、選ばれる.itemは変わります。

一定間隔の見た目を保つ必要があるなら、対象要素だけを同じ親へまとめる方法と、役割を示すクラスをHTML側で付ける方法も比較します。CSSの短さより、記事追加や並べ替えのあとも規則が読めることを優先します。

基本表示を先に書いてから位置による差を加える

:nth-child()に対応しない環境や、セレクタを解釈できない場合を考え、情報を読むために必要な基本表示は通常のセレクタで先に指定します。そのあとで、交互の背景色や列末の余白調整を加えます。

.price-list li {
  margin-right: 20px;
}

.price-list li:nth-child(3n) {
  margin-right: 0;
}

確認するときは、要素が3件だけの状態では足りません。1件、2件、3件、4件、6件と数を変え、途中へ別の要素を入れた場合も見ます。テンプレートを委託する場合は、何番目を選ぶかだけでなく、親要素へ入る要素の種類と、追加を担当する画面を引継ぎ資料へ残します。

最初の一手は、対象となる親要素の直下をHTMLで確認することです。選びたい要素と、その間に入る別の要素を上から番号で数えてください。