CSS WEB制作

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

last

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

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

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

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

目次
  1. コードの紹介と使い方
  2. まとめ

コードの紹介と使い方

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に関連する記事も紹介しておきます。

-CSS, WEB制作
-

© 2024 人生フリーハンド Powered by AFFINGER5