Select all direct children of the <ul> element

Question

Say I have:

<ul class="menu">
 <li>One</li>
  <ul class="submenu">
   <li>Apple</li>
   <li>Orange</li>
  </ul>
 <li>Two</li>
  <ul class="submenu">
   <li>Pear</li>
   <li>Banana</li>
  </ul>
</ul>

Is there a way to select only the first top-level children <ul>(in this case, “One” and “Two”) with CSS only?

Answer 1

Use the child selector >:

ul > li { font-weight: bold; }

The only problem is that this does not work in IE6. See this list of CSS selectors and browser support .

If you need to support this browser, you will need to do something like this.

ul li { font-weight: bold; }
ul li li { font-weight: normal; }

. , , .

Answer 2

ul > li

IE6. IE: http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

- .

Answer 3

, jQuery, IE6 jQuery css.

Answer 4

. :

<ul class="menu">
 <li>One
  <ul class="submenu">
   <li>Apple</li>
   <li>Orange</li>
  </ul>
</li>

li