201

What's the point using this syntax

div.card > div.name

What's the difference between this

div.card div.name
TylerH
  • 20,799
  • 66
  • 75
  • 101
Randy Mayer
  • 8,455
  • 8
  • 25
  • 11
  • Further to this question, as I wasn't aware of this and could be used to solve a problem I'm having, which browsers support this type of selector? – Kyle Apr 14 '10 at 10:01
  • 3
    It's supported in all current browsers. IE got support in version 7: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#combinators – Matti Virkkunen Apr 14 '10 at 10:02

5 Answers5

309

A > B will only select B that are direct children to A (that is, there are no other elements inbetween).

A B will select any B that are inside A, even if there are other elements between them.

Matti Virkkunen
  • 63,558
  • 9
  • 127
  • 159
17

> is the child selector. It specifies only immediate child elements.

The white space ( ) is the descendant selector. It specifies any descendant (including grandchildren, grand-grandchildren etc.).

The child selector is not supported by IE 6 and lower. A great compatibility table is here.

robertspierre
  • 3,218
  • 2
  • 31
  • 46
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
14

> vs. Space

Consider the two scenarios div > span { } vs. div span { }

Here, the (space) selects all the all the <span> elements inside <div> element even if they are nested inside more than one element. The > selects all the children of <div> element but if they are not inside another element.

Take a look at two examples:

> (Greater than):

div > span {
  color: #FFBA00 ;
}
<body>
  <div>
    <div>
      <span>Hello...</span>
      <p><span>Hello!</span></p>
    </div>

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

This one just selects the <span>Hello...</span> (because it's immediately after the nested div tag), and <span>World!</span> and it won't look for the <span> inside <p> tag because it's not immediately after a div tag.

Space

div span {
  color: #0A0 ;
}
<body>
  <div>
    <div>
      <span>Hello...</span>
      <p><span>Hello!</span></p>
    </div>

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

This one selects all the span tags, even if they are nested inside other tags.

15 Volts
  • 1,946
  • 15
  • 37
4

div.card > div.name matches <div class='card'>....<div class='name'>xxx</div>...</div> but it doesn't match <div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name matches both.

That is, the > selector makes sure that the selected element on the right side of the > is an immidiate child of the element on its left side.

The syntax without the > matches any <div class='name'> that is a descendant (not only a child) of <div class='card'>.

René Nyffenegger
  • 39,402
  • 33
  • 158
  • 293
-1

A > B selects B if it's a direct children of A, whereas A B selects B whether it is a direct children of B or not.

<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>
erenozten
  • 180
  • 1
  • 6
  • The demo is nice but really just ancillary to the information which answers the question; information that's already in the other three answers. Maybe if this question were asked today, that'd be useful, but if you're going to necro an >8-year-old question, it should really be for a compelling reason. – TylerH Sep 24 '18 at 18:12