Only Css style "this"

Question

I have a list with an element that should hang when it hangs. This works fine for me, as shown below:

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

However, this list item contains a different list, and using the CSS rule above, all list items in the child list also become underlined. I would like to emphasize only the first li (the one that actually hangs). I tried using child selectors, but I did not find anything that worked (although this is probably really obvious).

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

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

Answer 1

You can trick it, but wrap your text content in some other node that does not wrap its children http://jsfiddle.net/2CtFW/7/

This avoids cascading rules, since internal lists are not contained by an element that accepts a text-decoration rule. Initially, I thought it was a hack, but given the fact that you cannot 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 }