:last-child

ラストチャイルド（セレクタ）

意味親要素の最後の子要素

:last-childとは？

:last-child疑似クラスは、親要素の最後の子要素に対してスタイルを適用するために使用するCSSセレクタです。これにより、特定のグループの中で最後の要素だけに特別なスタイルを設定することができます。

:last-childの具体的な使い方

リストの最後の項目にスタイルを適用する例

<style>
  li:last-child {
    font-weight: bold;
  }
</style>

<ul>
  <li>最初の項目</li>
  <li>最後の項目</li>
</ul>

リスト(li要素)の中で最後の項目だけを太字にするスタイルを適用しています。

:last-childに関するよくある質問

Q. :last-childと:last-of-typeの違い

A. :last-childは親要素の最後の子要素を選択しますが、:last-of-typeは同じ要素タイプの中で最後のものを選択します。例えば、<div><h1></h1><p></p></div>の場合、pは:last-childに該当しますが、h1は:last-of-typeにのみ該当します。

Q. :last-childが効かない場合は？

A. :last-childが効かない主な理由は、選択しようとしている要素が実際に最後の子要素でない場合です。例えば、後ろに空白やコメントがある場合、それらも子要素としてカウントされるため、:last-childが機能しないことがあります。

Q. :last-childと:nth-last-child(1)の違い

A. :last-childと:nth-last-child(1)は同じ要素を選択します。両者の機能は同じですが、:last-childの方が記述が簡潔で、より一般的に使用されています。パフォーマンスの面でも大きな違いはありません。

CSSの:last-childについても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの:last-childや[attr~=value]、:root、*、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。