menu css using child selectors

Question

hi there. I have the following menu:

<ul class="top-menu">
<li><a_href="/Products" title="Products"><span>Products</span></a><ul>
<li><a_href="/Products/List" title="Product List"><span>Product List</span></a></li>
</ul>
</li>
<li><a_href="/Customers" title="Customers"><span>Customers</span></a></li>
</ul>

and I also have a sprite for the top menu items (products, customers). How is it possible to make the menu's top level links display the images ? thought about css nth-child selector

ul.top-menu
{
    list-style: none;
    width:528px;
}

ul.top-menu li a
{
    display:block;
    float:left;
    height:40px;
    background-image:url(../Images/sprite-menu.png);
    text-indent:-9999px;
}

ul.top-menu:nth-child(1) a
{
    width:135px;
    background-position:0 0;
}

but it is not working. thanks.

Answer 1

nth-child selectors are set on the child element, not the parent

To make your example work, I used the nth-child selector on the li rather than the ul, like so:

ul.top-menu li:nth-child(1) a
{
    width:135px;
    background-position:0 0;
}

And of course the "<a_href" tags in your sample HTML should read "<a href" with no underscore.

you probably want to chain child selectors

To achieve the effect I believe you want, which is to have only the top-level items get the style, I would use CSS Child Selectors instead:

/* desired top-level-only styles go here */
ul.top-menu>li>a
{
    width:135px;
    background-position:0 0;
}