отображение индекса DIV с помощью CSS

Question

У меня есть куча дивы, как этот

<div id="parentDiv"> 
    <div class="childDiv">some content</div> 
    <div class="childDiv">some content</div> 
    <div class="childDiv">some content</div> 
</div> 

есть какой-то способ, используя только CSS, что я мог бы показать текущий индекс слева от элементов childDiv и он автоматически обновляется, если Я должен был перетасовать их с помощью jQuery или мне нужно было бы манипулировать дочерним div с помощью jquery?

Или Один из других способов я думал, чтобы справиться с этим было бы изменить их ол Ли, но тогда я должен им быть нулевой основой, и я не вижу, что в CSS, чтобы сделать это либо

Answer 1

Вы можете использовать CSS counters:

#parentDiv { 
 
    counter-reset: index; /* Create a `index` counter scope */ 
 
} 
 
.childDiv:before { 
 
    content: counter(index) ". "; /* Display `index` counter */ 
 
    counter-increment: index; /* Add 1 to `index` */ 
 
}

<div id="parentDiv"> 
 
    <div class="childDiv">some content</div> 
 
    <div class="childDiv">some content</div> 
 
    <div class="childDiv">some content</div> 
 
</div>