CSSの子孫セレクタとは？基本の書き方と実行例をわかりやすく解説
CSSの子孫セレクタ（descendant selector）は、指定した要素の「内側にあるすべての子孫要素」にスタイルを適用するためのセレクタです。親要素と対象要素を半角スペースで区切って記述するのが特徴で、直下の子要素だけでなく、孫要素やそれ以降の階層にある要素もすべてマッチします。
子孫セレクタの基本的な書き方
構文は以下のように、親となるセレクタの後に半角スペースを空けて、対象となるセレクタを続けて記述します。
親セレクタ 対象セレクタ {
プロパティ: 値;
}
たとえば div p と書けば、「div要素の中に存在するすべてのp要素」がスタイル適用の対象になります。divの直下だけでなく、divの中にさらにネストされた要素の中にあるp要素も含まれる点に注意してください。
サンプルコード
次のコードでは、div p という子孫セレクタを使い、div要素内のp要素だけ背景色をオレンジ色に変更しています。
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>div内の段落1</p>
<p>div内の段落2</p>
</div>
<p>divの外側にある段落3</p>
</body>
</html>
表示結果
この例では、div要素の中にある「段落1」と「段落2」のみ背景がオレンジ色になり、divの外側にある「段落3」にはスタイルが適用されません。このように、子孫セレクタを使うことで、HTMLの構造に基づいてスタイルを適用する範囲を柔軟に制御できます。
子要素セレクタとの違い
似たセレクタとして「子結合子（>）」があります。div > p と書いた場合は、divの直接の子要素であるp要素だけが対象となり、より深い階層の孫要素はマッチしません。階層の深さまで含めたい場合は子孫セレクタ、直下だけに限定したい場合は子結合子を使い分けるとよいでしょう。
-
CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法
CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro
-
CSSの子孫セレクターとは？基本構文と使い方を実例つきで解説
CSSの子孫セレクター（descendant selector）は、ある要素の「内側」に存在する子孫要素を選択するためのセレクターです。セレクター同士を半角スペースで区切って並べることで、「左側の要素の中に含まれる右側の要素」すべてに対してスタイルを適用できます。 基本構文 CSS子孫セレクターの基本的な書き方は以下のとおりです。 element element { /* スタイル宣言 */ } このように記述すると、最初の element の子孫にあたる、2番目のセレクター名と一致する要素がすべて選択されます。直下の子要素だけでなく、孫要素やそ