【CSS】nth-childの基本的な使い方について

今回は、「nth-childの基本的な使い方」についてまとめました。

nth-childの使い方をマスターすることで、スタイルの幅が広がるので、是非学んで行きましょう!

【CSS】nth-childの基本的な使い方について

nth-childには沢山の使い方がありますが、今回は実案件でよく使うものに絞りました。

◎基本のHTML

特定の要素にスタイルをつける

特定の要素にスタイルをつけるには、「要素:nth-child(値){スタイルの内容}」のように記述すればOKです。

例えば、2番目の要素だけ色を変えたいとします。

その場合は以下のようにCSSを記述します。

2番目の要素だけ文字が赤色になっていることが分かるでしょう。

()の中の数字に指定したい要素の番号を入れたらOKです。

奇数の要素にスタイルをつける

奇数の要素にだけスタイルをつける場合は、「要素:nth-child(odd){スタイルの内容}」にしてあげればOKです。

1・3・5の奇数の要素にだけスタイルが当てることができました。

偶数の要素にスタイルをつける

偶数の要素にだけスタイルをつける場合は、「要素:nth-child(even){スタイルの内容}」にしてあげればOKです。

偶数の2と4にだけスタイルを当てることができました。

倍数の要素にスタイルをつける

例えば、2の倍数の要素にだけスタイルをつける場合は、「要素:nth-child(2n){スタイルの内容}」と記述すればOKです。

2の倍数である2と4にだけスタイルをつけることができました。

 

あと1・4など3ずつプラスした要素にだけスタイルをつけたい場合は、以下のように記述します。

しっかりスタイルがついていることが分かるでしょう。

最初の要素にスタイルをつける

最初の要素にだけスタイルをつけるには、「要素:first-child{スタイルの内容}」にすればOKです。

最初の要素にだけスタイルをつけることができました。

以下のような記述でも、最初の要素にだけスタイルをつけることができますよ。

最後の要素にスタイルをつける

最後の要素にだけスタイルをつけるには、「要素:first-child{スタイルの内容}」にすればOKです。

最後の要素にだけスタイルをつけることができました。

まとめ

以上が、「nth-childの基本的な使い方」でした。

真似しながらコーディングしてみてください!

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事