CSS - set left position of nth child

Question

I want to set the left postition of n-th div to (n-1)*250px, for e.g:

1st child: left = 0px
2nd child: left = 250px
...

is it possible to do so in css? I am using Javascript to set this. Thanks.

Answer 1

The CSS3 calc() method comes to mind, but it doesn't support using the index (n) as an operand, so that will not work.

Recommended solution: You could potentially design your layout such that the widths of each of the elements is 250px. Give each of the elements display: inline-block or float: left and they'll line up as you intend. If the width of the content of the elements needs to be larger than 250px, ensure overflow: visible (default value) is set on the elements and allow the content to overflow. Without more information, this should achieve the effect you are intending.

However, if you need to use a more direct method of positioning, you should stick with JavaScript to set the position of these elements. Likely, you'll want to take into account screen width, element width, and more, and CSS will leave you unable to do so.

Take a look at this JSFiddle for inspiration. If you post a sketch of what you're looking to achieve, I can help you further.

Answer 2

You can use:

div:nth-of-type(an+b)
// or
div:nth-child(an+b)

to address your divs.

div{
  position:absolute;
} 
div:nth-child(2){
  left: 250px;
} 
div:nth-child(3){
  left: 500px;
} 

without preprocessor you need to write every rule by hand because there is no possibility for a dynamic way when setting the left property.

Another possiblity (depending on what you really want to do) would be to introduce nesting and set padding-left:250px. But that only works if you can alter your markup accordingly.

Javascript probably is the easiest way here.