How do I/can I recursively indent div's with a class?

Question

I'm looking at a page of html code that follows this pattern:

<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'm looking to indent the contents of the inner divs, without changing their class, such that the page will be displayed so:

contents
  other contents
    yet even more contents

Is this feasible through manipulation of 'someclass'? If so, how?

Note that the divs may contain some other, fairly simple html - such as headings, lists, etc...

Answer 1

I think your looking for the following css rule

.someclass { margin-left: 10px; }

For no indent on the first item

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

Answer 2

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

(sidenote: you should avoid starting a id or class with a number for crossbrowser compatibility)

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

This will display and indent of 20px on all the div's inside the parent div with id div1.

See this fiddle.