CSSカウンタの使用

Question

要素がそれぞれ個別の要素にネストされている場合、その要素を数えるにはどうすればよいですか？

.variant--name::before { 
 
     counter-increment: section; 
 
     content: "Abschnitt " counter(section) ": "; 
 
    }

<div class="variant--group"> 
 
<h3 class="variant--name">variant</h3> 
 
</div> 
 

 
<div class="variant--group"> 
 
<h3 class="variant--name">variant</h3> 
 
</div> 
 

 
<div class="variant--group"> 
 
<h3 class="variant--name">variant</h3> 
 
</div>

Answer 1

またcounter-reset

body { 
 
    counter-reset: section; 
 
} 
 
.variant--name::before { 
 
    counter-increment: section; 
 
    content: "Abschnitt " counter(section)": "; 
 
}

<div class="variant--group"> 
 
    <h3 class="variant--name">variant</h3> 
 
</div> 
 
<div class="variant--group"> 
 
    <h3 class="variant--name">variant</h3> 
 
</div> 
 
<div class="variant--group"> 
 
    <h3 class="variant--name">variant</h3> 
 
</div>

編集必要があります：あなたは親要素を作成し、すべてののために今、それにcounter-resetを使用することができますが要素でカウンタをリセットする代わりにカウンタFiddleの新しいインスタンスを作成するFiddle