:last-child疑似クラス

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

解説

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

構文

構文は以下になります。

サンプル

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

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

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

備考

• スタイルを一番最初の要素に適用したい場合は、:first-child疑似クラスを使用します。

関連項目

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

Tweet