What does this css selector/syntax mean?

Question

Possible Duplicate:
What does “>” mean in CSS rules?
CSS ‘>’ selector; what is it?

What means:

#nav > li > ul

Google is ignoring the > and I dont know, what it means. I mean the ">".

Read this: http://css-tricks.com/child-and-sibling-selectors/ — khollenbeck, Jan 30 '13 at 20:36

score 4 · Answer 1 · answered Jan 30 '13 at 20:33

The > indicates that the element should be a direct child, not just a descendant.

Given the following piece of HTML:

<div id="nav">
    <ul>
        <li></li>
    </ul>
</div>

The following CSS selector would match the list item:

#nav li { }

While this one wont:

#nav > li { }

score 1 · Answer 2 · answered Jan 30 '13 at 20:34

> is a child selector. This means that it will match the immediate child and not others otherwise nested.

For example, this css: div > p > span will match this HTML:

<div>
    <p><span>...</span></p>
</div>

but not this HTML:

<div>
    <p>
        <ul>
            <li><span> ... </span></li>
        </ul>
    </p>
</div>

In your example, your CSS would match a structure like follows:

<ul id="nav">
   <li>
        <ul> <-- this one gets matched
...

Without seeing the rest of the CSS, I'd assume it was to style a nested sub-menu in a navigational element.

score 1 · Answer 3 · answered Jan 30 '13 at 20:39

Don't you mean #nav > ul > li ?

In which case it would mean "Select the li tag that is the child of a ul tag which is in itself the child of an element with the id nav.

<div id="nav">
    <ul>
        <li>The css selector locates this list item</li>
    </ul>
</div>

3 Answers3