How do I / can I recursively div a div with a class?

Question

I am looking at the html code page that follows this template:

<div id='1' class='someclass'> contents <div id='2' class='someclass'> other contents <div id='3' class='someclass'> yet even more contents </div> </div> </div> 

I want to defer the contents of the inner divs without changing their class so that the page renders like this:

 contents other contents yet even more contents 

Is this possible if you manipulate "someclass"? If so, how?

Please note that divs may contain some other, rather simple html - such as headers, lists, etc.

Answer 1

I think you are looking for the following css rule

 .someclass { margin-left: 10px; } 

Indent the first element

 .someclass .someclass { margin-left: 10px; } 

Answer 2

I'm not sure if this is what you need, but you can do the following:

(sidenote: you should avoid running an identifier or class with a number for crossbrowser compatibility)

 div#div1 div { margin-left:20px; } 

This will display and indent 20px in all divs inside the parent div with id div1 .

See fiddle .

Answer 3

You can do this, but for this you need to create a container so that it draws a special identifier:

 #yourContainer div { padding-left:0px; } #yourContainer div > div { padding-left:5px; } #yourContainer div > div > div { padding-left:10px; } 

HTML

 <div id="yourContainer"> <div id="1" class='someclass'> contents <div id="2" class='someclass'> other contents <div id="3" class='someclass'> yet even more contents </div> </div> </div> </div> 

If you want absolutly with class, try this

 #yourContainer .someclass { padding-left:0px; } #yourContainer .someclass > .someclass { padding-left:5px; } #yourContainer .someclass > .someclass > .someclass { padding-left:10px; } 

U may so, replace "padding-left" with "margin-left", it u the boss; -)