【HTML】first-child, last-child, nth-childの使い方【CSS】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

１分で理解できるHTML/CSS講座シリーズです。

今回はxxx-childシリーズについて学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

first-childとは

特定の要素の最初に当てはまる要素のみに、スタイルを適用する擬似クラス

wrapクラスの最初のp要素を赤色にする

See the Pen
first-child by samehack (@samehack)
on CodePen.

last-childとは

特定の要素の最後に当てはまる要素のみに、スタイルを適用する擬似クラス

wrapクラスの最後のp要素を青色にする

See the Pen
last-child by samehack (@samehack)
on CodePen.

nth-childとは

特定の要素のN番目の要素にのみ、スタイルを適用する擬似クラス
※Nには好きな番号を入れる事が出来るため、
これさえ覚えておけばfirst-childとlast-childは使わなくても、
指定した要素にスタイルを適用させることができます。

wrapクラスの2番めのp要素を緑色にする

See the Pen nth-child by samehack (@samehack) on CodePen.

まとめ