Question

I like the hover effect to highlight rows in an unordered list. But when I have sublists, the result is a little much. The parent row surrounding the entire sublist is highlighted as well as the selected sublist item.

Is there a way to, using CSS, override the hover effect of the parent list item if the list item immediately contains an unordered list?

Fiddle: http://jsfiddle.net/LgCTm/

HTML;

<ul>
    <li>Row 1</li>
    <li>Row 2</li>
    <li>
        <ul>
            <li>Row 3 Col 1</li>
            <li>Row 3 Col 2</li>
        </ul>
    </li>
</ul>

CSS;

ul { padding: 5px 3px;
    margin: 3px 0; }
li { padding: 3px 2px; background-color: #DDD; }
li:hover { background-color: #0F0; }

Answer 1

This is a duplicate answer from 2 years back, this was the best answer back than:

According to Wikipedia:

Selectors are unable to ascend

CSS offers no way to select a parent or ancestor of element that satisfies certain criteria. A more advanced selector scheme (such as XPath) would enable more sophisticated stylesheets. However, the major reasons for the CSS Working Group rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.

And for anyone searching SO in future, this might also be referred to as an ancestor selector.