:nth-last-child()

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

意味後ろから数えて特定の位置にある子要素

:nth-last-child()とは？

:nth-last-child()セレクタは、子要素の中で後ろから数えて特定の位置にある要素を選択するために使用する疑似クラスです。

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

末尾から特定の位置の要素にスタイルを適用する例

<style>
  ul li:nth-last-child(2) {
    color: red;
  }
</style>

<ul>
  <li>1番目の項目</li>
  <li>2番目の項目</li>
  <li>3番目の項目</li>
</ul>

ul要素の子リスト項目(li)の中で後ろから2番目にある要素のテキスト色を赤に設定します。

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

Q. :nth-last-child()の基本的な使い方は？

A. :nth-last-child()は、親要素内の子要素を後ろから数えて選択するCSSセレクタです。括弧内に数字や数式を入れて使用します。例えば、:nth-last-child(2)は後ろから2番目の要素を選択します。

Q. :nth-child()との違いは何ですか？

A. :nth-child()は前から数えて要素を選択するのに対し、:nth-last-child()は後ろから数えて要素を選択します。例えば、5つの要素がある場合、:nth-child(2)は前から2番目を、:nth-last-child(2)は後ろから2番目（全体では4番目）を選択します。

Q. 奇数・偶数の選択はできますか？

A. はい、:nth-last-child(odd)で後ろから数えて奇数番目の要素を、:nth-last-child(even)で後ろから数えて偶数番目の要素を選択できます。これは:nth-child()と同様の動作をしますが、カウントの起点が逆になります。

:nth-last-child()が学べる書籍の紹介

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

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