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

CSSの:nth-child(n)セレクターとは？特定の順番の要素をスタイリングする方法

CSSの:nth-child(n)セレクターは、親要素の中でn番目に出現する子要素を選択できる擬似クラスです。リストや段落など、同じ種類の要素が並んでいるときに「何番目か」を指定してスタイルを適用したい場面で非常に役立ちます。

たとえば、複数ある<p>要素の中から、親要素内で4番目の子要素にあたるものだけを装飾したい場合は、次のように記述します。

使用例

以下のコードでは、p:nth-child(4) を指定し、4番目の<p>要素の背景色をオレンジ色、文字色を白に変更しています。ブラウザで表示すると、4番目の段落だけが強調表示されます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:nth-child(4) {
        background: orange;
        color: white;
      }
  </style>
  </head>
  <body>
    <p>これはデモテキスト1です。</p>
    <p>これはデモテキスト2です。</p>
    <p>これはデモテキスト3です。</p>
    <p>これはデモテキスト4です。</p>
    <p>これはデモテキスト5です。</p>
    <p>これはデモテキスト6です。</p>
  </body>
</html>

覚えておくと便利な応用パターン

:nth-child() には数値だけでなく、さまざまな指定方法があります。

  • 偶数番目のみ：:nth-child(even) または :nth-child(2n)
  • 奇数番目のみ：:nth-child(odd) または :nth-child(2n+1)
  • 先頭から3つごと：:nth-child(3n)
  • 後ろから数えて指定：:nth-last-child(n)

このように :nth-child(n) セレクターを活用すれば、JavaScriptを使わずCSSだけで柔軟なデザイン表現が可能になります。表の縞模様（ゼブラストライプ）やリストの交互配色などにも広く使われているので、ぜひ覚えておきましょう。

  1. 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) { /*

  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