CSS3スタイル虎の巻

:last-child疑似クラス

:last-childは、一番最後の子要素にスタイルを適用する疑似クラスです。

解説

一番最後の子要素にスタイルを適用します。

構文

構文は以下になります。

要素:last-child {スタイル}

サンプル

リストの一番最後の要素の背景色を赤色にする


ul.sample01 li:last-child{
  background-color:red;
}

<ul class="sample01">
  <li>いぬ</li>
  <li>ねこ</li>
  <li>たぬき</li>
</ul>
  • いぬ
  • ねこ
  • たぬき

備考

関連項目

  • :first-of-type:指定した子要素で一番最初の要素にスタイルを適用する
  • :last-of-type:指定した子要素で一番最後の要素にスタイルを適用する
  • :first-child:一番最初の子要素にスタイルを適用する
  • :last-child:一番最後の子要素にスタイルを適用する
  • :nth-of-type(n):指定したn番目の子要素にスタイルを指定する
  • :nth-child(n):指定した要素のn番目の子要素にスタイルを適用する