CSSスキル - 第8章 Lesson1

擬似クラスfirst-childとlast-child

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

擬似クラス「first-child」と「last-child」の使い方について、初心者向けに解説しています。
ここでは、複数のliタグの最初と最後にだけ、文字の色を変更するCSSをかけて練習してみます。



この動画で学べること

・擬似クラスfirst-childとlast-childを使う方法



擬似クラスfirst-childとlast-childを使う方法

今回は、擬似クラスfirst-childとlast-childについて学んでいきましょう。
この擬似クラスは、例えば複数ある<li>タグの最初だけ、最後だけと指定してスタイルをかけるためのものです。



ではまず、擬似クラスfirst-childを使って書いてみましょう。
<li>タグの一番最初だけ文字の色をオレンジにするという指定をします。



li:first-child {
color: orange;
}



一度、保存してブラウザで見てみましょう。
一番最初の<li>タグだけ、オレンジ色になりました。
では次に、擬似クラスlast-childを使って一番最後の<li>タグにだけ文字の色を緑にしてみます。



li:last-child {
color: green;
}



保存してブラウザで見てみましょう。
last-childで指定した部分が緑になりました。