CSS: incremento del margen superior

Estoy tratando de escalonar una clase div en una forma de escalera, por lo que parece que esto

1 2 3 4 

Editar: quiero cambiar el margen superior para que cada ubicación del div .process sea menor que la anterior. Los hice flotar para que se sientan uno al lado del otro, pero también me gustaría que cada div se siente más bajo que el anterior.

Intenté usar nth-child que, por supuesto, acaba de agregar el margen superior a todos los elementos porque comenzó a contar en el primer elemento y simplemente agregó el margen establecido a todos los divs. Sé que puedes crear un contador usando CSS, pero ¿puedes incrementar un margen usando CSS?

CSS

 .process { float: left; width: 20%; } .process:nth-child(1n+2) { margin-top: 1em; } 

HTML

  

Name Goes Here

Name Goes Here

Name Goes Here

Name Goes Here

Name Goes Here

Debido a que tiene un conjunto muy limitado de elementos, está bien usar el copiado automático:

http://jsfiddle.net/C4TWc/1/

HTML:

 
name
name
name
name
name

CSS:

 div { float: left; width: 20%; } div:first-child + div { margin-top: 2em; } div:first-child + div + div { margin-top: 4em; } div:first-child + div + div + div { margin-top: 6em; } div:first-child + div + div + div + div { margin-top: 8em; } div:first-child + div + div + div + div + div { margin-top: 10em; } 

¿Has considerado cambiar el marcado?

 
1
2
3
4
5

Ese marcado también parece más adecuado para el trabajo (dada la estructura jerárquica que desea).

Otra forma posible (se rompe muy fácilmente):

http://jsfiddle.net/C4TWc/2/

HTML:

 
name
name
name
name
name

CSS:

 div { display: block; } div ~ div:before { content: ''; width: 20%; height: 2em; float: left; }