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

CSSの:emptyセレクターで子要素を持たないすべてのp要素にスタイルを適用する方法

CSSで子要素（テキストやタグ）を一切持たないすべての<p>要素にスタイルを設定したい場合は、:emptyセレクターを使用します。

:emptyは、子ノード（要素やテキスト、空白文字も含む）をまったく含まない要素だけを選択できる擬似クラスです。これにより、空の段落だけを目立たせたり、レイアウト上の調整を行ったりすることが可能になります。

実装例

以下のコードでは、通常のp.demo要素にはグレーの背景を設定し、:emptyセレクターに一致する空の<p>要素にはオレンジ色の背景と異なる幅を適用しています。実際にブラウザで実行して動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p.demo {
            width: 300px;
            height: 20px;
            background: gray;
         }
         p:empty {
            width: 150px;
            height: 20px;
            background: orange;
         }
      </style>
   </head>
   <body>
      <p class = "demo">これはデモ用のテキストです。この下に空の段落があります。</p>
      <p></p>
  </body>
</html>

ポイント解説

  • p.demo：テキストを持つ通常の段落にはグレー背景が適用されます。
  • p:empty：中身が完全に空の段落にはオレンジ背景と150pxの幅が適用されます。

なお、:emptyセレクターは空白スペース1つでもあると「空」とみなされないため注意が必要です。HTML内で<p> </p>のように書いてしまうと、セレクターは機能しません。必ず<p></p>のように間に何も入れないようにしてください。

  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-