CSSの子セレクター（Child Selector）の使い方を徹底解説
CSSの子セレクターは、指定した要素の直下にある子要素だけを選択したい場合に使用するセレクターです。より具体的にスタイルを適用したい場面で非常に役立ちます。
div > p
子セレクターとは？
子セレクターは「>」記号を使って表現します。上記の例では「div > p」と記述することで、<div>要素の直接の子要素である<p>要素のみが選択されます。
注意すべき点は、孫要素やそれ以降の階層には適用されないということです。例えば、<span>タグの中に入れ子になった<p>要素は、divから見ると孫要素にあたるため、スタイルの対象外となります。これは、子孫をすべて選択する通常の子孫セレクター（div p）との大きな違いです。
実装例
以下のコードを実行して、CSSの子セレクターの動作を確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>div内の段落1</p>
<!-- これは子要素ではない -->
<span><p>div内の段落2（spanの中）</p></span>
</div>
<p>div外の段落3</p>
</body>
</html>出力結果
このコードを実行すると、「div内の段落1」だけがオレンジ色の背景で表示され、「spanタグ内の段落2」と「div外の段落3」には背景色が適用されません。
まとめ
- 子セレクターは「親要素 > 子要素」の形式で記述する
- 直接の子要素にのみスタイルが適用される
- 入れ子になった孫要素や、親要素の外側にある要素は選択されない
特定の階層だけに正確にスタイルを適用したい場合は、子セレクターを活用することで、意図しない要素への影響を防ぎ、より保守しやすいCSSを書くことができます。
-
CSSコメントの書き方と使い方を徹底解説
CSSコメントとは CSSでは、スタイル宣言に対してコメント（注釈）を記述することができます。コメントを適切に活用することで、コードの可読性が向上し、そのCSSが何を意図しているのかを他の開発者（や将来の自分自身）が理解しやすくなります。 CSSのコメントは、C言語スタイルの構文に従います。コメントはスラッシュとアスタリスクで始まり、アスタリスクとスラッシュで終わります。/* と */ の間に記述された内容はすべてブラウザに無視されるため、ページの表示には一切影響しません。 コメントの基本構文 CSSコメントの構文は以下のとおりです。 /* コメント */ コメントは単一行でも複数行でも記述で
-
CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法
CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro