The difference between h1 em and h1> em

Question

What is the difference between these two CSS statements:

h1 em { color:#ddd; }

and

h1 > em { color:#ddd; }

As far as I can tell, they do the same thing (although, according to what I read in the W3C, in the first case em is considered a “descendant”, where, as in the second, it is considered a “child”, although I don’t know how this is actually different). Can someone explain how they differ and why you decided to use one syntax over another. I always used the first method, but from time to time I look at the second code style of other people.

Answer 1

This:

h1 em { color:#ddd; }

matches any emthat is inside h1, be it a child, grandson, great-grandson, etc. For example:

<h1><strong><em>This matches</em></strong></h1>

This:

h1 > em { color:#ddd; }

em, h1, , .. :

<h1><strong><em>This doesn't match</em></strong></h1>
<h1><em>But this does</em></h1>

Answer 2

, , , :

<h1>Stuff here    
  <em>Something
    <p>More stuff</p>
    <p>Something <em>here</em></p>
  </em>
<h1>

h1 em em .

h1 > em em, h1, em.

Answer 3

h1 em { color:#ddd; }

: "em h1"

h1 > em { color:#ddd; }

: "em with parent h1"

Answer 4

- , - DOM ( child, grand-child type). - , DOM.

, , , IE6.

Answer 5

fyi, > , , jQuery , , .

Answer 6

child > em, h1.

- :

<h1>H1 Tag <em id="first">child selector<em id="second">not a direct child descendant</em></em> </h1>

em h1 > em h1 em, em h1 > em style, h1.

doctree: http://www.w3.org/TR/CSS2/conform.html#doctree