CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法

CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。

例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。

:nth-last-of-type(n)セレクターの基本構文

要素:nth-last-of-type(n) {
  /* 適用するスタイル */
}

引数の「n」には整数だけでなく、「odd（奇数）」「even（偶数）」や数式（例：3n+1）も指定できるため、柔軟な要素選択が可能です。

実装例：後ろから2番目の<p>要素にスタイルを適用する

以下のコードでは、:nth-last-of-type(2)を使って、親要素内で後ろから2番目にあたる<p>要素の背景色と文字色を変更しています。

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:nth-last-of-type(2) {
        background: blue;
        color: white;
      }
    </style>
  </head>
  <body>
    <p>This is demo text 1.</p>
    <p>This is demo text 2.</p>
    <p>This is demo text 3.</p>
    <p>This is demo text 4.</p>
    <p>This is demo text 5.</p>
  </body>
</html>

表示結果のポイント

このHTMLをブラウザで開くと、5つの<p>要素のうち「This is demo text 4.」（後ろから2番目）のみが青い背景に白文字で表示されます。他の段落にはスタイルが適用されません。

:nth-last-child(n)との違い

よく混同されやすいのが:nth-last-child(n)との違いです。

  • :nth-last-of-type(n) … 同じタグ名の兄弟要素の中で、後ろから数えた順番で判定する
  • :nth-last-child(n) … タグの種類に関係なく、すべての子要素の中で後ろから数えた順番で判定する

そのため、<p>要素の間に<div>や<span>など別の要素が混在している場合でも、:nth-last-of-type()なら<p>要素だけを正確にカウントして選択できます。リストの末尾近くの項目や、記事の最終段落の手前など、文書の終わり側を基準にしたスタイリングを行いたい場面で特に便利なセレクターです。

  1. CSSの:focusセレクターとは？フォーカス時のスタイル指定方法を解説

    CSSの:focusセレクターは、キーボード操作やマウスクリックによってフォーカス（入力状態）が当たっている要素を選択するための疑似クラスです。主にフォームの入力フィールドなどで使用され、ユーザーが現在操作している要素を視覚的に強調表示できます。 :focusセレクターの基本的な使い方 :focusセレクターを使うと、テキストボックスやボタンなど、フォーカスを受け取った瞬間に背景色や枠線などを変更できます。これにより、どの項目を入力しているのかがひと目でわかるようになり、フォームの使い勝手（ユーザビリティ）が向上します。 実装例 以下のコードでは、input要素にフォーカスが当たったときに背景

  2. CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説

    CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white