Override hover pseudo-class on list item if list item contains a list

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; }

score 1 · Accepted Answer · edited May 23 '17 at 10:34

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.

edited May 23 '17 at 10:34

Community

1
1

answered Jul 11 '11 at 20:14

Phil

10,948
17
69
101

2

[Nice work.](http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child/45530#45530) – BoltClock Jul 11 '11 at 20:15
Fixed and sited the previous question. – Phil Jul 11 '11 at 20:20
That's what I need to know. I guess I should stop looking or dig into JS. – Orange Kid Jul 11 '11 at 20:25

score 1 · Answer 2 · answered Jul 11 '11 at 20:19

1

How about this: http://jsfiddle.net/LgCTm/1/

It isn't exactly perfect, but could be the basis of a "good-enough workaround".

answered Jul 11 '11 at 20:19

Teddy

18,357
2
30
42

Thanks. Not as clean as I would want though. – Orange Kid Jul 11 '11 at 20:25

Override hover pseudo-class on list item if list item contains a list

2 Answers2