2016.06.15

2017.05.16

Web制作

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つの要素は文字サイズを大きくしたいときなどに使用します。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する