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

CSSの:only-of-typeセレクターで、親要素内の唯一のp要素をスタイリングする方法

CSSの:only-of-typeセレクターを使用すると、親要素の中で唯一の<p>要素となっているすべての<p>要素に対してスタイルを適用できます。同じ種類の要素が複数存在する場合は対象外となるため、特定の要素だけを狙って装飾したいときに非常に便利なセレクターです。

使用例

以下のコードを実行して、:only-of-typeセレクターの動作を確認してみましょう。最初のdiv要素内にはp要素が1つしかないため、その段落だけがオレンジ色の背景と白い文字色で表示されます。一方、2つ目のdiv要素内にはp要素が3つあるため、いずれにもスタイルは適用されません。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:only-of-type {
            background: orange;
            color: white;
         }
      </style>
   </head>
   <body>
      <div>
         <p>This is demo text 1.</p>
      </div>
      <div>
         <p>This is demo text 2.</p>
         <p>This is demo text 3.</p>
         <p>This is demo text 4.</p>
      </div>
   </body>
</html>
  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-