Using n inside calc

Not exactly what you may be after, but you can achieve a similar effect with scss if you know the number of elements. Just bear in mind that this will generate a lot of css:

@for $i from 1 through 7 {
    &:nth-child(#{$i}) {
      margin-left: calc(#{$i} * 46px);
    }
  }

You can't, as mentioned by @SLaks. But this can be solved by placing each next element inside the previous one.

See with divs:

div {
  margin-left: 46px
}
<div>test
  <div>test
    <div>test
      <div>test</div>
    </div>
  </div>
</div>

Or, use jQuery.

var margin=0;
$("div").each(function(){
  $(this).css("margin-left",margin+=46)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>

No; you can't do that.

The counter feature can almost do that, except that it can't be used with calc() either.

Tags:

Css

Css Calc