CSS Syntax Question

[Tim_USMC]

Trying to fully learn CSS, and I'm coming across this one occasional syntax that I cannot find any documentation about.

That is the '>' operator. Here is an example of it being used:

ul.nav li>ul{
/*Make the sub list items invisible*/
	display: none;
	position: absolute;
	width: 20ex;
	left: 20ex;
	margin-top: -1.4em;
	margin-left: 9px;
}

So this style applies to <ul> elements with the class of "nav", then <li> elements nested within that...

But what does the '>' imply? Is that just a designator for another level of nesting?

Like

<ul class="nav"><li><ul>...</ul></li></ul>

 

[=Vector=]

i've never seen that before and i've been using CSS for almost half a year now....

where'd you find that code anyway?

 

[Shadow2531]

ul.nav li { }

li is a descendant selector in this case and would do:

<ul class="nav">
    <li>style this</li>
    <li>style this</li>
<ul>

That means, any li in a ul with class="nav" will be styled.


ul.nav li>ul {}

li>ul is a descendant child selector and would do:

<ul class="nav">
    <li>
        <ul> <-- style this

        </ul>
    </li>
</ul>

That means, if an ul elment is a child of an li element that's a descendant of a ul element with a class of 'nav', the ul element will be styled.

http://www.w3.org/TR/CSS21/selector.html#child-selectors

 

[Tim_USMC]

child selector

That's what I was looking for, but couldn't find any documentation. Thanks!