CSS select direct child items only

Question

I have following html markup. I want to apply a css style to the `li` items which are direct children of main `ul`. I do not want to select the li items which are nested inside `li`. How can I do that? In the following code, I want to select only "main item 1" and "main item 2". I'm trying > operator but it does not work. HTML: ```

Main item 1
Main item 2
- sub item 1
- sub item 2

``` CSS: ``` .nav > ul li a:hover{ color: red; } ``` Demo: http://jsfiddle.net/tk6RS/

Accepted Answer

You're only selecting the parent `ul` with `>`, you'll need to add another to also pick immediate children of that `ul`, for example: ``` .nav > ul > li > a:hover{ color: red; } ``` You'll also need to add `li > a:hover` to select the anchor elements inside them, since the child `` elements are also within the `

` scope.

CSS select direct child items only

Solution

Problem