Selecting all direct children of a <ul> element
css, css-selectors
Solution
Use the child selector `>`:
ul > li { font-weight: bold; }
The only problem is that this doesn't work in IE6. See this list of CSS selectors and browser support.
If you need to support that browser you'll have to do something like this.
ul li { font-weight: bold; }
ul li li { font-weight: normal; }
This will be relatively straightforward in some situations and completely unworkable in others. If you find yourself in a difficult situation you may need to interpose some classes to make it easier.
Problem
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 children of the top level `<ul>` element (in this case "One" and "Two") with just CSS?