Selecting an element that has a specific child?

Question

If I wanted to do a CSS selector on a list like this:

<ul>
    <li></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>

and I wanted to do a li:hover effect on only the lis that contain an <a> tag, is there a way to specify that in CSS? if li:hover contains <a> then li:hover effect = X?

css doesn't allow you to "reach back" up the cascade chain to change a parent's layout based on a child. — Marc B, Jan 24 '13 at 19:56
possible duplicate of [Complex CSS selector for parent of active child](http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child) — Jan Hudec, Jan 25 '13 at 09:36
See https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Ed Randall, Apr 17 '17 at 06:02

score 5 · Accepted Answer · answered Jan 24 '13 at 19:56

5

No, CSS does not allow you to select elements based on their descendants.

answered Jan 24 '13 at 19:56

Jon

428,835
81
738
806

1

`:has(node)` will be implemented in future CSS spec, currently in draft/proposals at the moment. – ocodo Oct 02 '21 at 08:23

Ali Bassam · Answer 2 · 2013-01-24T20:04:14.263

1

You can do it in JQUERY:

$("a").parent("li").css("color","#923123");

For what you requested, it would be like this:

$("li").mouseover(function(){

   if ($(this).is(':parent'))
   {
       //this <li> has a child, supposed to be <a>
   }

});

edited Jan 24 '13 at 20:04

answered Jan 24 '13 at 19:56

Ali Bassam

9,691
23
67
117

score 0 · Answer 3 · answered Jan 24 '13 at 20:01

0

Depending on your ultimate objective and what the effect is, you could apply the styles to the anchor tag - which then wouldn't apply to those list items without one.

Alternatively, whilst you can't do this directly in CSS, if the list is dynamic and you can identify the list items that contain a link at the point of generation, you could apply classes based on their status and style accordingly.

If it's not a dynamic list, just add the classes manually.

answered Jan 24 '13 at 20:01

Mark

3,005
1
21
30

Okay, thanks. I thought maybe with the new types of CSS selectors there was a way to do this in CSS but I guess I'll have to wait for CSS4 :P – proseidon Jan 24 '13 at 20:02

score 0 · Answer 4 · answered Jan 24 '13 at 20:49

For that you need a CSS4 parent selector, but of course it's not supported for now.

$li:hover a { ... }

If it doesn't matter what tag is inside, you could just use:

li:hover {border:1px solid red}
li:empty:hover {border:0}

:empty selector is not supported in ie7.

http://jsfiddle.net/aD6Ws/

Jquery alternative is :

$("li:has('a')").hover(function() { ... },function(){ ...  })

Selecting an element that has a specific child?

4 Answers4

Linked