CSS for elements that have certain children elements?

Question

Possible Duplicate:
Is there a CSS parent selector?

Lets say I have this html

<div class="house"><span class="zombie"/></div>
<div class="house"><span class="vampire"/></div>
<div class="house"><span class="zombie"/></div>

How could I write a bit of CSS to target "div .house" that only has children with "span .vampire"? And "div .house" might not always be the direct parent of "span .zombie"

Possibly of interest: [Why we don't have a parent selector](http://snook.ca/archives/html_and_css/css-parent-selectors) — sdleihssirhc, Oct 04 '11 at 18:33

score 1 · Answer 1 · answered Oct 04 '11 at 18:31

1

You can't. This is the one thing that CSS can't do.

jQuery has the :has() pseudo-selector.

answered Oct 04 '11 at 18:31

Pekka

442,112
142
972
1,088

CW'ing because this is of course a dupe. Thanks @BoltClock – Pekka Oct 04 '11 at 18:31

score 0 · Answer 2 · answered Oct 04 '11 at 18:31

0

You can't do it with CSS alone. You can however quite easily with jQuery.

$('.house:has(.vampire)').doStuff();

or

$('.house').has('.vampire').doStuff();

answered Oct 04 '11 at 18:31

Madara's Ghost

172,118
50
264
308

CSS for elements that have certain children elements?

2 Answers2