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

CSSの:nth-of-type(n)セレクターで親要素のn番目の<p>要素にスタイルを適用する方法

CSSの :nth-of-type(n) セレクターを使うと、同じ親要素内でn番目に出現する特定の要素（ここでは <p> 要素）だけを選択してスタイルを適用できます。このセレクターは、要素の種類ごとに順番を数えるため、他の種類の要素が混在していても正確に対象を指定できるのが特徴です。

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

要素名:nth-of-type(n) {
  /* スタイルの記述 */
}

実装例

以下のコードでは、p:nth-of-type(2) を指定することで、親要素（body）内の2番目の <p> 要素のみ背景色が黄色になります。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:nth-of-type(2) {
            background: yellow;
         }
      </style>
   </head>
   <body>
      <p>これはデモテキスト1です。</p>
      <p>これはデモテキスト2です。</p>
      <p>これはデモテキスト3です。</p>
      <p>これはデモテキスト4です。</p>
   </body>
</html>

表示結果

このコードを実行すると、「これはデモテキスト2です。」と書かれた段落だけが黄色い背景で表示されます。1番目・3番目・4番目の段落にはスタイルは適用されません。

補足：類似セレクターとの違い

  • :nth-child(n) … 親要素内のすべての子要素の中でn番目の要素に一致します。途中に別の種類の要素があると、意図した要素と一致しない場合があります。
  • :nth-of-type(n) … 同じ種類の要素の中でn番目のものに一致します。要素の種類を基準に数えるため、より直感的に特定の段落やリスト項目を指定できます。

また、n の部分には「2n」「odd」「even」などの式も使えるため、偶数番目や奇数番目の要素へ一括でスタイルを適用することも可能です。

  1. CSSの:only-childセレクターを使って、親の唯一の子であるすべての<p>要素にスタイルを適用する方法

    CSSの:only-childセレクターを使用すると、親要素内で唯一の子要素として存在する<p>要素だけを選択し、スタイルを適用することができます。兄弟要素が1つでも存在する場合、その要素は対象外となるため、特定の構造を持つHTMLに対してピンポイントでデザインを指定したいときに非常に便利です。 :only-childセレクターの基本構文 p:only-child { /* スタイルの指定 */ } 実装例 以下のコードでは、2つの<div>要素の中に<p>タグが配置されています。最初の<div>には<p>要素が1つだけ含まれてい

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-