How to style parent when parent contains specific child?

Question

I have some html that looks like this:

<div id="parent">
  <div id="child"></div>
</div>

I want to apply a default background color to #parent except for when it contains a #child.

So the CSS should end up looking something like this:

#parent {
  background: red
}
#parent:contains(#child) {
  background: none
}

However, I can't get the :contains pseudo selector to work that way. Is there a way to achieve this?

See: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Ed Randall, Apr 17 '17 at 06:02

score 1 · Accepted Answer · edited May 23 '17 at 11:46

:contains() was only intended to match elements containing certain text, not elements containing certain other elements. It is because of the complications associated with matching elements by text that there were almost no browser implementations, leading to :contains() being dropped from the spec.

Since there is no parent selector in CSS, and :has() (which does look at elements) only exists in jQuery, you won't be able to achieve this with CSS yet.

For the record, jQuery implements :contains() as well, but it does so according to the old spec, so it uses the name :has() for elements instead.

score 0 · Answer 2 · answered Jul 18 '12 at 18:05

0

With jquery

if($("#child").length>0) $("#parent").css("backgroundColor","#fff");

Its not possible with pure css.

answered Jul 18 '12 at 18:05

user1475195

with jQuery you can do $('#parent:has(#child)').css...but I am going for a CSS only solution. – Andrew Jul 18 '12 at 18:06

2 Answers2