Calc() on a numbered CSS class?

Question

Say I have the following HTML:

<div class="bigSquare">
   <div class="square0 square"></div>
   <div class="square1 square"></div>
   <div class="square2 square"></div>
   <div class="square3 square"></div>
</div>

And the following CSS:

.bigSquare {
   height: 100px;
   width: 100px;
}

.square {
   position: absolute;
   height: 40px;
   width: 40px;
}

.square0 {
   left: 5px;
   top: 5px
}

.square1 {
   left: 55px;
   top: 5px
}

.square2 {
   left: 5px;
   top: 55px
}

.square3 {
   left: 55px;
   top: 55px
}

Is it possible to reduce the square0, square1, square2, and square3 CSS down to something that looks like this?

.square[n] {
   left: calc((n % 2) * 50px + 5px);
   top: calc((n / 2) * 50px + 5px);
}

I realize that the % operator isn't legal but maybe there's an equivalent.

Take a look at my answer [here](http://stackoverflow.com/a/41838310/2813224). I made a demo using CSS Variables that looks very similar to what you are trying to do. Upvote it if it helps. BTW `%` is an remainder operator (i.e. the remainder of a quotient) — zer00ne, Feb 25 '17 at 20:08

score 0 · Answer 1 · answered Feb 25 '17 at 17:26

Not exactly the syntax you expected, but you can use attr:

<div class="square" rel="1"></div>
<div class="square" rel="2"></div>

.square{
   left:calc( attr(rel) / 2 * 50px + 5px);
   top: calc( attr(rel) mod 2 * 50px + 5px);
}

This may do the trick.

Calc() on a numbered CSS class?

1 Answers1