954,598 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

apply css to nested divs

I use the following code on my page:

<div id="itemstable" class="item_type1">
...other divs here...
</div>

And in my CSS file I have this code:

.item_type1 div {
	background-image: url(images/type1.giff);
}

the problem is there are a lot of different item types so I will need to have a lot of lines in my CSS file. I was wondering how to apply the background-image: url(images/type1.giff); style to the nested divs without assigning it to each one. eg. I want to change the code for the "itemstable" div so that it applies a css rule to the nested divs.

Is this possible?

blamlol
Newbie Poster
2 posts since Aug 2009
Reputation Points: 10
Solved Threads: 0
 

you can have same class for all the divs. and use class selector.

DangerDev
Posting Pro in Training
485 posts since Jan 2008
Reputation Points: 165
Solved Threads: 59
 

Hi,

continuing DangerDev's advised.

if you just need to apply the same style rule over a nested divs', then you could try this instace in your CSS file:

.item_type1, .item_type1 div, .item_type1 div div /* applies the same backgroud on the div that is inside the class(item_type1) div */, .item_type1 div div div /* apply more combination of classes+selectors... */ {
background-image : url(images/type1.gif); }
essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 

looks like everyone is giving me the same answer, which involves me putting the background URL's in the CSS file which I dont want, I want something like this:

<div id="itemstable" style="SET BACKGROUND IMG FOR NESTED DIVS HERE">
...other divs here...
</div>


EDIT: figured it out, I forgot i could set the style in the <head /> section.

blamlol
Newbie Poster
2 posts since Aug 2009
Reputation Points: 10
Solved Threads: 0
 

Just leave the divs transparent. As long as you don't specify a background, they will show the background under them.

Be careful putting images under text. Many people have trouble reading that.

MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
 

I might be wrong but i think you can style the div and put a backround image in it.
I didnt have time to test it yet.

Style Sheet
#itemstable
{
background:url('YOUR GRADIENT IMAGE.gif') repeat-x;
height: 30%;
width: 50%;
margin: 0 auto;
}

stevenpetersen
Junior Poster
134 posts since Jun 2009
Reputation Points: 45
Solved Threads: 1
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You