Is it possible – with css only – to auto increment numbers if elements are not siblings?
Something like this?
.numbers {
counter-increment: item;
&::before {
content: counter(item) ":";
}
}<div class="container">
<div class="row">
<div class="col">
<div class="numbers"></div>
Column
</div>
<div class="col">
<div class="numbers"></div>
Column
</div>
<div class="col">
<div class="numbers"></div>
Column
</div>
<div class="col">
<div class="numbers"></div>
Column
</div>
</div>
</div>And if not, what is the best and most efficient way to achieve it? JavaScript?
>Solution :
Instread of incrementing your counter with .numbers, you can do it with the parent.
.col {
counter-increment: item;
}
.numbers:before {
content: counter(item) ":";
}<div class="container">
<div class="row">
<div class="col">
<div class="numbers"></div>
Column
</div>
<div class="col">
<div class="numbers"></div>
Column
</div>
<div class="col">
<div class="numbers"></div>
Column
</div>
<div class="col">
<div class="numbers"></div>
Column
</div>
</div>
</div>