Css increments nth-child attribute values

Question

Is there a way to increase attribute values ​​using n in nth-child(n) to output the result:

 div:nth-child(1){ top: -5px; } div:nth-child(2){ top: -10px; } div:nth-child(3){ top: -15px; } div:nth-child(4){ top: -20px; } div:nth-child(5){ top: -25px; } 

Answer 1

It can be used if you use preprocessor as sass .

Example:

 div { $var: 5; @for $i from 1 through 5 { &:nth-child(#{$i}) { top: -#{$var}px; $var: $var + 5; } } } 

Demo: http://sassmeister.com/gist/7d7a8ed86e857be02d1a

Another way to achieve this:

 div { $list: 1 2 3 4 5; @each $i in $list { &:nth-child(#{$i}) { top: -5px * $i; } } } 

Demo: https://www.sassmeister.com/gist/fb5ee7aa774aafb896cd71a828882b99