nth-childを自在に使いこなしてコーディング速度アップ！！

cssの擬似クラスを使いこなすとhtmlに不要なクラスをつけずに様々要素にスタイルを適用させることができます。

n番目の要素

See the Pen child01 by tetsuro (@tetsuro) on CodePen.

まずは基本の使い方です。
first-childは一番最初の要素、last-childは最後の要素、nth-child(n)はn番目の要素にスタイルを適用させます。

偶数番目、奇数番目の要素

See the Pen child2 by tetsuro (@tetsuro) on CodePen.

偶数番目の要素はnth-child(2n)、奇数番目の要素はnth-child(2n+1)で適用させます。
用途としてはテーブルの行や列ごとに色を塗り分ける場合や、2カラムのレイアウトで要素を左右に配置するときなどに使用します。

See the Pen child3 by tetsuro (@tetsuro) on CodePen.

同じような記述法でnth-child(3n+1)と記述すると3の倍数+1個目の要素にだけスタイルを適用させたりもできます。

2個目以降の要素

See the Pen child4 by tetsuro (@tetsuro) on CodePen.

2個目以降の要素はnth-child(n+2)で適用させます。
用途としては2個目以降の要素には上にボーダを表示させるときなどに使用します。

3個目までの要素

See the Pen child5 by tetsuro (@tetsuro) on CodePen.

3個目までの要素はnth-child(-n+3)で適用させます。
最初の3つの要素は文字サイズを大きくしたいときなどに使用します。