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

CSSの子孫セレクターとは？基本構文と使い方を実例つきで解説

CSSの子孫セレクター（descendant selector）は、ある要素の「内側」に存在する子孫要素を選択するためのセレクターです。セレクター同士を半角スペースで区切って並べることで、「左側の要素の中に含まれる右側の要素」すべてに対してスタイルを適用できます。

基本構文

CSS子孫セレクターの基本的な書き方は以下のとおりです。

element element {
    /* スタイル宣言 */
}

このように記述すると、最初の element の子孫にあたる、2番目のセレクター名と一致する要素がすべて選択されます。直下の子要素だけでなく、孫要素やそれ以降の深い階層も対象になる点が特徴です。

使用例1：div要素の入れ子構造

次の例では、div要素が3段階に入れ子になったHTMLに対し、階層ごとに異なるボーダーの色と角丸を指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    float: right;
    margin: 25px;
    padding: 5px;
    width: 80px;
    height: 80px;
    border: solid aqua;
}
div div {
    border-color: blue;
    border-radius: 50%;
}
div div div {
    border-color: orange;
    border-radius: unset;
}
</style>
</head>
<body>
<div>
<div>
<div>
</div>
</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

CSSの子孫セレクターとは？基本構文と使い方を実例つきで解説

外側のdivは水色（aqua）、中間のdivは青色で円形、最も内側のdivはオレンジ色で角丸なしと、階層ごとにスタイルが切り替わっていることが確認できます。

使用例2：li要素への適用

子孫セレクターはリスト要素にも有効です。次の例では、「別のli要素の中に含まれるli要素」だけに背景色を指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
li li {
    background-color: lightsteelblue;
}
</style>
</head>
<body>
<ol>
<li></li>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
<li></li>
</ol>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

CSSの子孫セレクターとは？基本構文と使い方を実例つきで解説

親リスト直下のli要素には背景色が付かず、入れ子になった内側のli要素のみが薄い青色（lightsteelblue）で塗られているのがわかります。

子セレクター（>）との違い

子孫セレクターとよく比較されるのが、> を使う「子セレクター」です。子セレクターは直下の子要素のみを対象とするのに対し、子孫セレクターはどれだけ階層が深くても該当する要素すべてにマッチします。用途に応じて使い分けることで、意図した通りのスタイル制御が可能になります。

  1. CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

    CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro

  2. CSSの高度なセレクター徹底解説｜隣接兄弟・属性・nth-of-typeセレクターの使い方

    CSSには、要素をより細かく指定できる「高度なセレクター」が多数用意されています。代表的なものとして、隣接兄弟セレクター、一般兄弟セレクター、直接の子セレクター（子結合子）、属性セレクター、nth-of-typeセレクターなどがあります。 これらのセレクターを使いこなせるようになると、HTMLに余計なクラスやIDを追加することなく、柔軟かつ効率的にスタイルを適用できるようになります。ここでは、それぞれのセレクターの特徴と使い方を解説します。 CSSの高度なセレクターの種類 1. 隣接兄弟セレクター（+） 「A + B」の形式で記述し、要素Aの直後に隣接している要素Bのみにスタイルを適用しま