Css style only "this" element

Question

I have a list with an item which, when hovered over, should highlight. I've got this working fine as below:

li.test:hover
{
   text-decoration: underline
}

However, this list item contains another list, and using the above CSS rule all list items in the child list become underlined as well. I'd like only the first li (the one which is actually hovered over) to underline. I did try to use child selectors but I didn't find anything that worked (though it's probably really obvious).

How can I apply a style only to the current element and not its children?

Jsfiddle: http://jsfiddle.net/Mansfield/2CtFW/

Answer 1

You can cheat it but wrapping your text content into some other node which doesn't wrap its children http://jsfiddle.net/2CtFW/7/

This avoids the cascading rules since the inner lists aren't contained by the element that is receiving the text-decoration rule. Initially, I thought this was a hack, but considering the fact that you can't style text elements and this is really what you want to do in this case, I think this is the only way to achieve what you want.

<ul>
    <li>
        <span>Item1</span>
        <ul>
            <li><span>Item2</span></li>
        </ul>
    </li>
<ul>


li>span:hover
{
    text-decoration: underline
}