Is there a way to use the "n" value in :nth-child(n)?
CSS doesn't have support for variables. You could use Less/SASS loops and define it for n up to some value, but that would output almost the same CSS multiple times. Here is Codepen example.
SCSS code to support up to 10 cards:
$n: 10;
@for $i from 1 through $n {
.card:nth-child(#{$i}) {
position: absolute;
left: 10px * $i;
top: 10px * $i;
}
}
But are you sure your approach is correct? Maybe you want to take a step back and look for a different approach. Because this still doesn't scale dynamically, you'll have to predict or limit n to some value. If you were to pick large n, it would result in a big CSS file, which equals longer load times.
Try this method using JavaScript
var cards = document.getElementsByClassName('card');
for(i = 0; i < cards.length; i++) {
cards[i].style.position = 'absolute';
cards[i].style.left = String(i * 10) + 'px';
cards[i].style.top = String(i * 10) + 'px';
}.card{
opacity:0.5;
float:left;
position:absolute;
background-color:blue;
border:1px solid red;
width:40px;
height:60px;
}<div class="holder">
<div class="card card1" ></div>
<div class="card card2" ></div>
<div class="card card3" ></div>
<div class="card card4" ></div>
</div>Don't exactly know what are going to do with it, but you could achieve the same effect by nesting divs
.card {
position:absolute;
background-color: rgba(0,0,255,0.5);
border:1px solid red;
width:40px;
height:60px;
}
.card > .card {
position:absolute;
left:10px;
top:10px;
} <div class="holder">
<div class="card card1" >
<div class="card card2">
<div class="card card3" >
<div class="card card4" >
</div>
</div>
</div>
</div>
</div>http://jsfiddle.net/xmj5u2Lg/7/