2017.10.18

22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

CSS3で追加された nth-child() 等のnth-系プロパティは非常に便利です。単に何番目と指定するだけでなく、組み合わせることによって色んなパターンに対応させることができます。サンプルとともに基本から応用例まで紹介します。

共通のHTML


<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  ...
</ul>

倍数

5の倍数


.list > li:nth-child(5n) { ... }

5n と書けば5の倍数、7n なら7の倍数というようにできます。n は0から始まる整数なので、0, 5, 10, 15…番目の要素が選択されますが、nth-child() は1番目からカウントが始まるので0番目は存在しません。よって実質的には 5n は5, 10, 15, 20…番目の要素を指定していることになります。


.list > li:nth-child(5n+2) { ... }

また、5n+2 と記述すれば n は0から始まるので、2, 7, 12, 17, 22…番目の要素が選択されるようになります。

偶数


.list > li:nth-child(2n) { ... }
.list > li:nth-child(even) { ... }

偶数は2の倍数なので、2n と表すことができますが、even という指定の仕方もできます。

奇数


.list > li:nth-child(2n+1) { ... }
.list > li:nth-child(odd) { ... }

奇数は 2n+1 と表すことができますが、odd という指定の仕方もできます。

n番目

最初


.list > li:first-child { ... }
.list > li:nth-child(1) { ... }

どちらでも表現できますが、:first-child の方が対応ブラウザが多いです。

最後


.list > li:last-child { ... }
.list > li:nth-last-child(1) { ... }

これも2つ方法があります。

3番目


.list > li:nth-child(3) { ... }

nth-child() に数字を記述すれば指定した番目の要素のみにスタイルをあてることができます。3 なら3番目の要素のみを選択できます。

後ろから3番目


.list > li:nth-last-child(3) { ... }

後ろから数えるときは nth-last-child() を使います。

3番目と7番目


.list > li:nth-child(3):nth-child(7) { ... }

これは間違っています。:nth-child() は繋いで書くとどんどん絞り込まれていきます。:nth-child(3) で3番目を指定し、:nth-child(3):nth-child(7) と記述すると3番目の中から7番目を指定しているので1つも選択されません。


.list > li:nth-child(3),
.list > li:nth-child(7) { ... }

カンマで複数セレクタを記述すれば大丈夫です。

真ん中


.list > nth-child(4):nth-last-child(4) { ... }

例えば、li 要素数が7個のときはこのように書きます。前から4番目かつ後ろから4番目が真ん中に当たるからです。なので、要素数が無限なときはCSSだけでは不可能です。しかし、グリッドシステムなどで最大要素数が決まっているときなどは以下の方法で実現できます。


.list > nth-child(2):nth-last-child(2),  /* 要素数3のとき2番目 */
.list > nth-child(2):nth-last-child(3),  /* 要素数4のとき2番目 */
.list > nth-child(3):nth-last-child(3),  /* 要素数5のとき3番目 */
.list > nth-child(3):nth-last-child(4),  /* 要素数6のとき3番目 */
.list > nth-child(4):nth-last-child(4),  /* 要素数7のとき4番目 */
.list > nth-child(4):nth-last-child(5),  /* 要素数8のとき4番目 */
.list > nth-child(5):nth-last-child(5),  /* 要素数9のとき5番目 */
.list > nth-child(5):nth-last-child(6),  /* 要素数10のとき5番目 */
.list > nth-child(6):nth-last-child(6),  /* 要素数11のとき6番目 */
.list > nth-child(6):nth-last-child(7) { /* 要素数12のとき6番目 */
  ...
}

グリッドシステムでは大体分割数が12なのでその場合はこんな感じで書けます。

範囲指定

3番目まで


.list > li:nth-child(-n+3) { ... }

後ろから3番目まで


.list > li:nth-last-child(-n+3) { ... }

4番目以降


.list > li:nth-child(n+4) { ... }

2番目から5番目まで


.list > li:nth-child(n+2):nth-child(-n+5) { ... }

nth-child() を2つ組み合わせることで表現できます。

2番目から15番目までで3の倍数


.list > li:nth-child(3n):nth-child(n+2):nth-child(-n+15) { ... }

nth-child() を繋げて書くことで条件を絞り込むことができます。

5番目以外


.list > li:not(:nth-child(5)) { ... }

:not() と組み合わせることで実現できます。

要素数によって指定

要素数が1個


.list > li:only-child { ... }

要素数が7個のときその全て


.list > li:first-child:nth-last-child(7),
.list > li:first-child:nth-last-child(7) ~ li { ... }

かなりトリッキーですが、これで実現できます。

要素数が7個で奇数


.list > li:first-child:nth-last-child(7):nth-child(2n+1),
.list > li:first-child:nth-last-child(7) ~ li:nth-child(2n+1) { ... }

要素数が3個以上のときその全て


.list > li:nth-last-child(n+3),
.list > li:nth-last-child(n+3) ~ li { ... }

要素数が3個以下のときその全て


.list > li:first-child:nth-last-child(-n+3),
.list > li:first-child:nth-last-child(-n+3) ~ li { ... }

要素が存在する(1個以上のときその全て)


.list > li:not(:only-child) { ... }

CSS本執筆しました！！！

CSS本出します！1/29発売予定
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日