Question

I need to target css for the first level ul submenu in a parent ul.

CSS:

#menu li:hover > ul.sub_menu { ...some styles }

..but this will ofcourse do it for all the sub_menu’s, I only want this particular style for the first sub_menu relative to the parent when you hover over the parent list item.

HTML:

<ul id="menu">
    <li>Item 
      <ul class="sub_menu"><!-- target only this one -->
       <li>Item
         <ul class="sub_menu">etc...</ul><!-- do not do for this one and so on-->
       </li>
      </ul>
    </li>
    <li>Item 
      <ul class="sub_menu"><!-- target only this one -->
       <li>Item
         <ul class="sub_menu">etc...</ul><!-- do not do for this one and so on-->
       </li>
      </ul>
    </li>
</ul>

Thanks for any feedback…

Answer 1

You can use the :first-child selector:

#menu > li:first-child > ul.sub_menu {
    color: red;
}

And then use the descendant selector to revert the changes for the other elements:

#menu > li:first-child > ul.sub_menu ul {
    color: black;
}

Demo: http://jsfiddle.net/6y4Sb/