How to offset the nth child of an element

Question

I am trying to extract the nth child of an element, so that elements appear stacked within the same container.

I\'ve tried reading over https://developer.mozilla.org/en

Answer 1

You could use padding left and do something like

p:nth-child(2){
 padding-left: 50px;
}

Answer 2

This isn't possible with plain CSS unfortunately.

You can use Javascript or a CSS preprocessor (probably a postprocessor as well?).

Here is how I would approach it with Sass, which would compile to CSS:

@for $i from 1 through 2 {
  p:nth-child(#{$i}) {
    top: $i * 100px;
    left: $i * 50px;
    position: relative;
  }  
}

and here's a quick demo: http://www.sassmeister.com/gist/8af65851d1c404be698f