子セレクタ

概要

「>」結合子は 2 つのセレクタ間に置かれ、第 1 セレクタにマッチする要素の「直接の子要素」のうち、第2セレクタにマッチする要素とマッチします。比較として、子セレクタの代わりに「子孫セレクタ」が使われた場合には、第 1 セレクタにマッチする要素の「子孫要素」のうち、第 2 セレクタにマッチする要素とマッチします。子孫セレクタでは DOM 階層間の「飛び越え」回数は無関係です。

構文

selector1 > selector2 { style properties }

例

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

次のマークアップに用いると:

<div>
  <span>Span 1. In the div.
    <span>Span 2. In the span that's in the div.</span>
  </span>
</div>
<span>Span 3. Not in a div at all</span>

結果はこうなるでしょう:

Span 1. In the div. Span 2. In the span that's in the div.
Span 3. Not in a div at all.

仕様書

ブラウザ実装状況

関連情報

• ---