Calc() sur une classe CSS numérotée?

Question

Dire que j'ai le code HTML suivant:

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

Et le CSS suivant:

.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 
} 

Est-il possible de réduire le square0, square1, square2 et square3 CSS à quelque chose qui ressemble à ceci ? Je réalise que l'opérateur% n'est pas légal mais peut-être qu'il y en a un équivalent.

Answer 1

Pas exactement la syntaxe que vous attendiez, mais vous pouvez utiliser 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); 
} 

Cela peut faire l'affaire.