first-child と last-childの使い方をご紹介

プログラミングを勉強中のみなさん、こんにちは！

今回は、CSSの　first-child と last-child　について紹介します。

初心者向けのメモ書きとして執筆しておりますので、あしからず。

それでは見ていきましょう。

コードの紹介と使い方

first-child

これは、兄弟要素の最初の要素だけに、CSSを適用するものです。

例えば・・・

<div class="test">

<p>文章１</p>

<p>文章２</p>

<p>文章３</p>

</div>

上記のHTMLにに、下記のようなCSSををてを適用すると・・・

.test :first-child {
color: red;
}

文章１
文章２
文章３

このように最初の「文章１」だけ赤になりました。

last-child

これは、兄弟要素の最後の要素だけに、CSSを適用するものです。

例えば・・・

<div class="test">

<p>文章１</p>

<p>文章２</p>

<p>文章３</p>

</div>

上記のHTMLにに、下記のようなCSSををてを適用すると・・・

.test :last-child {
color: blue;
}

文章１
文章２
文章３

このように最後の「文章3」だけ青になりました。

詳しくはこちらもどうぞ。
first-childとlast-child

まとめ

first-child →　兄弟要素の最初の要素だけ
last-child　→　兄弟要素の最後の要素だけ
にCSSを適用します。

もしかしたら、適用したい要素にわざわざidやclassを設定してCSSを変えてた人もいるのではないでしょうか。（私もそうでした(-_-;)）

first-child と last-child　をうまく使ってスッキリしたコーディングにしましょう。

CSSに関連する記事も紹介しておきます。