Applying a background to an unamed parent div, but not the child

[harristown]

I am using the code below to add rounded corners to my page.

However, when I place <div>s inside of this section the bottom-left.jpg displays as the background for all subsequent (child) divs.

I know that I could name all 4 of the <div>s. E.g. <div class="grouping1"><div class="grouping2">...
however this seems unneccesary. Am I missing something, or is naming each <div> the correct method?

.grouping {
 	background: #F2F2F2 url(../images/corner_top_left.jpg)	top left no-repeat;
}
 
.grouping div {
 	/*this value will be inherited by all spans inside this*/
 	display: block; 
 	background: url(../images/corner_top_right.jpg) top right no-repeat;
}
 
.grouping div div {
 	background: url(../images/corner_bottom_right.jpg) bottom right no-repeat;
}
 
.grouping div div div {
 	background: url(../images/corner_bottom_left.jpg) bottom left no-repeat;
}
 
/*Rest of code only needed to make this work in IE*/
.grouping div div div  {
 	height: 0; 
}
.grouping div div > div  {
 	height: auto;
}

<div id="overview" class="grouping"><div><div><div>
	<div id="map1">
		<img src="../images/placeholder1.jpg" alt="" />
	</div>
	<div id="title">
		<span>Routeburn Track - Day 1</span>
	</div>
	<div id="description">
		<p>	Intentions: Routeburn Shelter to Routeburn Flats Hut<br />
			Date:	Sat. 13th December, 2008<br />
			Time:	3hrs<br />
			Pack:	22kg (approx)<br />
			Weather:	Clear skies<br />
		</p>
		<p>	Travellers:	Bill, Cassie</p>
	</div>
	<div id="map2">
			<img src="../images/placeholder2.jpg" alt="" />
	</div>
</div></div></div></div>

[james_littler]

You can target a specific child div by saying for instance

.grouping > div {
    background: none;
}

This would only target the direct child of .grouping.

I think if you cleaned your code up and removed the unnecessary divs it'd be alot easier to help you as currently I have no Idea what any of those 3 divs within grouping actually do.

This looks like a bad case of divitus!

[harristown]

Hi, you are right, the only purpose of the <div>s is to allow me to have dynamically sized boxes with rounded corners.

I have taken the code from:
http://www.htmldog.com/examples/images3_3.html

which actually usually <span>s instead of <div>s, but I am using mine for block content.