I’ve got a div that will contain child elements. I want to apply a background image to the div, only when it contains at least one element matching a specific class name.
Is this possible with css3?
For example
.footer includes:.box1 {//apply a background}
Am afraid you would have to make a conscious decision an apply a different ( or additional class ) when the parent element contains the target element.
As the name implies , CSS (CASCADING style sheets), rules flow downwards onto children, but a parent element’s style cant be affected by their children. 
CSS3 has marginal support. Be aware if you design a page RELYING on CSS3 that it will BREAK in older browsers and pretty much ALL IE browsers ( maybe IE9 being the exception)
On that note , CSS3 does has :empty rule but that’s going to cause some SERIOUS headaches as Mozzila supports it, IE ignores it, and oddly enough, Safari just ignores the :empty part and applies the rule whether the element is empty or not.
besides this is all or nothing… its either TOTALLY empty or NOT EMPTY , I don’t now of anyway in which you could make it EMPTY OF .box1 if there are .box2 or or ther elements in the div.
No, it’s not possible I’m afraid. There was talk of a ::contains pseudo class but it was dropped.
At present css only works one way and you can’t find something then work back up and style the parent.
The parent selector has been asked for many times but is something that would be very awkward to achieve due to the way that css works.
Depending on your situation you could probably fake something by using the :before or :after pseudo classes to add some content to provide a background to the div but would be pretty reliant on structure.
Here is an example that will work in IE8+ but is reliant on a certain structure.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.outer {
position:relative;
width:50%;
background:red;
z-index:-2;
padding:10px;
}
.highlight:after {
content:" ";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:green
}
span {
background:blue;
color:#fff
}
</style>
</head>
<body>
<div class="outer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, <span class="highlight">Green Background added </span>, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
</div>
<div class="outer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, <span>Original Red background shows through</span>, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
</div>
</body>
</html>
The background of the parent div is only green when there is a child with a classname of .highlight.
Thanks Dresden & Paul, I always appreciate your insights!
@Paul: very clever solution. I’ve never considered using 4 positions to stretch the background/element bounds full width and height of the container. I learn something every time I come here 
top:0;
left:0;
right:0;
bottom:0;
Who knew?
It’s similar to the trick I use for my equal column absolute colour overlays (except that I use a real element for full browser support and not generated content).
Thats a good trick Paul.
Always consider the simple solution tho. if your site is automated (if is being generated by a CMS) you can use the CMS to add a class to which contains the bg you want to the div is the div contains .box1… if is being hand coded then of course the human typing should be aware enough to add that same class IF .box1 is present.