CSSで親要素内の最初のp要素だけにスタイルを適用する方法（:first-of-typeセレクタ）
はじめに
CSSを使って、親要素の中で最初に出現する<p>要素だけにスタイルを適用したい場合は、:first-of-typeセレクタを使用します。このセレクタは、同じ種類の兄弟要素の中で最初の要素を対象とするため、特定の要素タイプの先頭だけを装飾したいときに非常に便利です。
:first-of-typeセレクタとは
:first-of-typeは、CSS3で導入された構造疑似クラスの一つです。指定した要素タイプ（この場合は<p>）が、その親要素内で最初に現れるものを自動的に選択します。HTML側に特別なクラスやIDを追加する必要がないため、マークアップを汚さずにスタイリングできるのが大きなメリットです。
実装例
以下のコードでは、<body>要素内の最初の<p>要素に対してオレンジ色の背景を適用しています。実際にブラウザで表示すると、1つ目の段落のみ背景色が変わり、2つ目の段落は通常どおり表示されることが確認できます。
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
background: orange;
}
</style>
</head>
<body>
<p>これはデモテキスト1です。</p>
<p>これはデモテキスト2です。</p>
</body>
</html>コードの解説
- p:first-of-type：各親要素内で最初に現れる<p>要素を選択します。
- background: orange;：選択された要素の背景色をオレンジに設定します。
注意点
:first-of-typeは「最初の子要素」ではなく「最初の同種要素」を対象とします。例えば、<p>要素の前に<h1>や<div>があっても、それらは無視され、最初の<p>要素が選択されます。「最初の子要素」を厳密に指定したい場合は、:first-childセレクタを使用してください。
まとめ
:first-of-typeセレクタを使えば、HTMLを変更することなく、親要素内の最初の<p>要素に簡単にスタイルを適用できます。リード文の強調や記事冒頭のデザインなど、さまざまな場面で活用できる便利なセレクタです。
-
CSSの:only-childセレクターを使って、親の唯一の子であるすべての<p>要素にスタイルを適用する方法
CSSの:only-childセレクターを使用すると、親要素内で唯一の子要素として存在する<p>要素だけを選択し、スタイルを適用することができます。兄弟要素が1つでも存在する場合、その要素は対象外となるため、特定の構造を持つHTMLに対してピンポイントでデザインを指定したいときに非常に便利です。 :only-childセレクターの基本構文 p:only-child { /* スタイルの指定 */ } 実装例 以下のコードでは、2つの<div>要素の中に<p>タグが配置されています。最初の<div>には<p>要素が1つだけ含まれてい
-
CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説
CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-