子孫セレクタ

概要

子孫セレクタは、 2 つのセレクタとその間に置いた半角スペース（または連続した半角スペース）で表現され、第 1 セレクタにマッチする要素の子孫要素のうち、第 2 セレクタにマッチするものを選択します。子孫セレクタは子セレクタに似ていますが、マッチした要素間の厳密な親子関係を必要としません。

構文

selector1 selector2 { style properties }

例

span { background-color: white; }
div span { background-color: DodgerBlue; }

これは次のマークアップで

<div>
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>
<span>Span 3.</span>

次のように表示されるでしょう。

Span 1. Span 2.
Span 3.

仕様書

ブラウザ実装状況

関連情報

• ---