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

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;
}

このコードでは、親要素内のすべての<p>要素の中から、最後から4番目にある<p>要素を対象に、背景色を青・文字色を白に設定しています。

実装例

次のコードを実行すると、:nth-last-child(n)セレクターの実際の動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:nth-last-child(4) {
            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>
      <p>This is demo text 6.</p>
   </body>
</html>

出力結果

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

上記の例では6つの<p>要素が並んでいます。このうち、末尾から4番目に相当する「This is demo text 3.」の段落だけが、青い背景に白い文字で表示されます。

補足：nth-childとの違いと応用

:nth-child(n)が先頭から数えるのに対し、:nth-last-child(n)は末尾から数える点が大きな違いです。また、引数には「odd（奇数番目）」「even（偶数番目）」といったキーワードや、「2n+1」のような数式も指定できるため、テーブルの縞模様表示など、柔軟なスタイリングに活用できます。

  1. CSSの:rootセレクターとは？使い方と実例をわかりやすく解説

    CSSの:rootセレクターは、ドキュメントのルート要素（HTML文書では<html>要素）を対象にスタイルを適用するための擬似クラスです。ページ全体の背景色や基本の文字色など、文書全体に影響するデザインを指定したい場合に活用できます。基本的な使い方以下のコードは、:rootセレクターを使ってページ全体の背景を青色にし、文字色を白色に設定する例です。<!DOCTYPE html> <html>    <head>       <style> &n

  2. CSSの:requiredセレクターとは？必須入力フィールドをスタイリングする方法

    CSSの :required セレクターは、HTMLフォーム内で「必須」項目として指定された入力要素を視覚的に強調したい場合に非常に便利な擬似クラスです。required 属性が付与された <input> 要素に対してのみスタイルを適用できるため、ユーザーにとって入力必須の項目がひと目でわかるフォームを作成できます。 :requiredセレクターの基本的な使い方 required 属性を持つ入力欄に背景色などを設定することで、必須項目であることを明示できます。以下のコードでは、input:required に対してオレンジ色の背景を指定しています。 サンプルコード <!DOC