子結合子

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

子結合子 (child combinator) (>) は 2 つの CSS セレクターの間に配置されます。 2 つ目のセレクターが 1 つ目のセレクターの直接の子要素の場合にのみ一致します。

css
/* "my-things"クラスを持つリストの子要素であるリスト項目 */
ul.my-things > li {
  margin: 2em;
}

2 つ目のセレクターに一致する要素は、 1 つ目のセレクターに一致する要素の直接の子要素でなければなりません。これは、子孫結合子が 1 つ目のセレクターに一致する要素が祖先が存在する 2 つ目のセレクターに一致するすべての要素に一致するのに比べて厳密です。

構文

css
セレクター1 > セレクター2 { スタイルプロパティ }

CSS

css
span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

HTML

html
<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 the div at all.</span>

結果

仕様書

Specification
Selectors Level 4
# child-combinators

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Child combinator (A > B)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報