Confusion about two different CSS syntax to select nested elements [duplicate]

Question

Possible Duplicate:
What does “>” mean in CSS rules?

CSS has the following two syntaxes which seem to be doing the same thing. Selecting a nested element.

div span

div > span

Am I missing something, or are these two indeed equivalent selectors ?

Could you mark it as duplicate instead of closing it? I asked the question here, because SO normally focuses on more programming related questions. Thanks the link helped. Edit: I guess you are right, this does belong to SO. — Parag
– Parag, Commented May 21, 2012 at 9:09
Unfortunately I can't mark things as duplicate if the duplicate is on a different StackExchange site from Webmasters. (It's a limitation/design choice of the SE software.) Sorry! — Nick
– Nick, Commented May 21, 2012 at 9:54
@Nick: Now that the question has been migrated, I've closed it here. Thanks for flagging! — BoltClock
– BoltClock, Commented May 21, 2012 at 18:04

Jon · Accepted Answer · 2012-05-21 13:10:29Z

10

No, they are not equivalent. The first one is the descendant selector, while the second is the child selector.

Quick example:

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

With this markup .a > .c will select nothing, while .a .c and .a > .b > .c will select the innermost element.

answered May 21, 2012 at 13:10

Jon

439k85 gold badges756 silver badges820 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Undefined · Accepted Answer · 2012-05-21 13:12:27Z

3

div span

Will select any span that is inside any div. This could be multiple levels deep.

div > span

Will only select any spans that are the direct descendants of a div. More info about child selectors -> http://meyerweb.com/eric/articles/webrev/200006b.html

answered May 21, 2012 at 13:12

Undefined

11.4k5 gold badges39 silver badges62 bronze badges

Thanks for the link... it's very useful.