【CSS】擬似クラスで『最初と最後の子要素』に装飾をしたい（:first-child、:last-child）

2019年2月19日2020年5月22日

サイト制作をしていると当たり前のように「CSS」をいじることもあるでしょう。レイアウトや装飾などさまざまな機会にこの擬似クラスを使うことによって「1番最初の子要素（:first-child）」や「1番最後の子要素（:last-child）」に装飾をすることができます。

初心者向けの記事なので、そんなの分かってるよと言う方には不要な記事です。

それではひとつずつ使用例と合わせてみていきたいと思います。

1番最初の子要素へ擬似クラス「 :first-child 」を使う！

まずは「:first-child」で1番最初の子要素へ装飾を施してみたいと思います。

HTML
こんな感じのHTMLソースコードを用意してみました。この例では一番最初の子要素「北海道」に装飾を加えます。


北海道
宮城
東京都
大阪
名古屋
福岡
沖縄

CSS
そしてCSSはこのような感じになります。1番最初の子要素である「北海道」が赤字になります。

.test-1 li:first-child {
　color:#F00;
}

それでは見てみましょう！

「北海道」が赤くなりましたね。このような感じです。それほど難しい話ではないので分かっていただけたかと思います。
続いて、1番最後の子要素へ装飾を加えるために:last-childを使用した例をご紹介します。

HTML
class名がtest-2になっていますが、ソースコードは先ほどと同じです。


北海道
宮城
東京都
大阪
名古屋
福岡
沖縄

CSS
CSSも大して変わっていません。先ほどは1番最初の子要素を赤に変えましたが、今回は1番最後の子要素を青に変えています。

.test-2 li:first-child {
　color:#00F;
}

すると、こんな感じになります。1番最後の子要素である「沖縄」が青くなりました。

今回は「1番最初の子要素」と「1番最後の子要素」に対してCSSを適用する際に使える「:first-child」と「:last-child」をご紹介しました。
この応用したものと類似したものを引き続き別記事でご紹介していきたいと思います。

よかったらシェアしてね！

地方でフリーランスの広告制作をしています。Wordpressでのサイト構築やチラシやポスターなどの製作も行なっています。
最近ではオンラインイベントなどの動画配信やプロモーション動画の撮影・作成も増えてきました。ドローンでの空撮のお仕事もたまにいただいています。