プログラミング

【CSS】うまく活用しよう first-child と last-child

スポンサーリンク

last

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

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

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

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

コードの紹介と使い方

first-child

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

例えば・・・

<div class="test">

<p>文章1</p>

<p>文章2</p>

<p>文章3</p>

</div>

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

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

文章1
文章2
文章3

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

last-child

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

例えば・・・

<div class="test">

<p>文章1</p>

<p>文章2</p>

<p>文章3</p>

</div>

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

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

文章1
文章2
文章3

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

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

まとめ

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

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

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

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

スポンサーリンク

-プログラミング
-, , , , ,

© 2022 サカらいふ Powered by AFFINGER5