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

このエントリーをはてなブックマークに追加 にほんブログ村 ライフスタイルブログへ
【CSS】:first-child、:last-child

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

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

—[Sponsor]—

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

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

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


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

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


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

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

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

1番最後の子要素へ擬似クラス「 :last-child 」を使う!

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

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


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

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

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


このエントリーをはてなブックマークに追加 にほんブログ村 ライフスタイルブログへ
About 1tokuu 136 Articles
広告クリエイターとして生活しながら、趣味のまちづくりに没頭したり、仲間たちと様々なイベントを企画し酸いも甘いも経験しています。 様々な経験の中で培ったリアルなものを記事としていますので、何か使えるものがあればお使いください。