Web制作

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

2016.06.15

2017.05.16

整然と咲くチューリップ

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に関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。