Calc() auf einer nummerierten CSS-Klasse?

Question

Sagen wir, ich habe folgende 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> 

und die folgenden 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 
} 

Ist es möglich, die square0, square1, square2 und square3 CSS nach unten, um etwas zu reduzieren, die wie folgt aussieht ?

Ich weiß, dass der Operator% nicht legal ist, aber vielleicht gibt es ein Äquivalent.

Answer 1

Nicht gerade die Syntax erwartet Sie, aber Sie können attr verwenden:

<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); 
} 

Dies kann den Trick tun.