CSSセレクターの「>」とスペースの違いは何ですか？

126

この構文を使用する意味は何ですか

div.card > div.name

これの違いは何ですか

div.card div.name

css css-selectors

— ランディメイヤー
ソース

この質問に加えて、私はこれに気づかず、私が抱えている問題を解決するために使用できるので、どのブラウザーがこのタイプのセレクターをサポートしていますか？

— カイル

3

現在のすべてのブラウザでサポートされています。IEはバージョン7でサポートを得た：msdn.microsoft.com/en-us/library/...

— マッティVirkkunen

210

A > B Aの直接の子であるBのみを選択します（つまり、間に他の要素はありません）。

A B それらの間に他の要素があったとしても、Aの中にあるBを選択します。

— マッティ・ヴィルクネン
ソース

11

>ある子セレクタは。2番目の例のように、子孫（孫、孫などを含む）は指定せず、>。

子セレクターはIE 6以下ではサポートされていません。優れた互換性の表はこちらです。

— ペッカ
ソース

2

div.card > div.name一致する<div class='card'>....<div class='name'>xxx</div>...</div> が一致しない<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name 両方に一致します。

つまり、>セレクターは、右側の選択された要素が>左側の要素の即時の子であることを確認します。

>一致しない構文<div class='name'>は、の子孫（子だけではない）と一致します<div class='card'>。

— ルネ・ニフェネガー
ソース

0

A> Bは、Aの直接の子である場合はBを選択し、ABはBの直接の子であるかどうかにかかわらずBを選択します。

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>

スニペットを展開

— eozten
ソース

ここにコードスニペットがあります。あなたがそれを見ることができるかどうか私は知りません。

— eozten

デモは素晴らしいですが、質問に答える情報に本当に付随しています。他の3つの回答にすでに含まれている情報。たぶん、この質問が今日尋ねられた場合、それは役に立つでしょうが、8年以上前の質問をネクロするつもりなら、それは本当に説得力のある理由であるべきです。

— TylerH 2018

0

> vsスペース

2つのシナリオdiv > span { }とdiv span { }

ここでは<space>、<span>要素のすべての要素が<div>別の要素の内部にある場合でも、それらがすべてを選択します。>は<div>要素のすべての子を選択しますが、それらが別の要素内にある場合。

>（より大きい）：

div > span {
  color: #FFBA00 ;
}

<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
</body>

スニペットを展開

これはを選択するだけ<span>World!</span>で、<span>内部は検索されません<p>タグを。

スペース

div span {
  color: #FFBA00 ;
}

<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
<body>

スニペットを展開

これは、別のタグ内にネストされている場合でも、すべてのspanタグを選択します。

— ゴスワミ
ソース