要素内のテキストとして要素インデックス（子番号）を挿入する方法はありますか？

Question

私の目的は、行単位でテキストファイルを印刷し、最初に行番号を追加することです。これと同じように：あなたはそれに対して操作を実行することができ、親と子の中にセレクタ内

<div id="wrapper"> 
    <div class="line">1: asdf</div> 
    <div class="line">2: asdfasdf</div> 
    <div class="line">3: asdfasdfasdfasdf</div> 
    <div class="line">4: asdf</div> 
</div> 

nは例えば、要素のインデックスを担当するCSS内の変数です。 nth-child(2n + 3）

この変数を取得してプレーンテキストとして挿入する方法はありますか？基本的に次のように：

.line:before { 
    content: n; 
} 

私はバニラCSSでそれをやってのけるにいくつかの方法があります場合、私はちょうど思っていた、使用している何であるSASSでこれを達成することができます知っています。

Answer 1

はい、CSSカウンタを使用してこれを行うことができます。一致するセレクタに遭遇すると、CSSカウンタを作成してインクリメントすることができます。この場合、.wrapper要素のレベルにカウンタを作成してから、新しい.line要素が検出されるたびにカウンタ値をインクリメントすることができます。

counter-resetプロパティはカウンタの作成に使用され、counter-incrementは値の増分に使用されます。カウンタの値はcounter(counter-name)の値を持つcontentプロパティを介して擬似要素に割り当てることができます。

Aaron Laversがコメントで指摘したように、CSSカウンタは新しいものではなく、supported from IE8 itselfです。

#wrapper { 
 
    counter-reset: line-number; 
 
} 
 
.line { 
 
    counter-increment: line-number; 
 
} 
 
.line:before { 
 
    content: counter(line-number)": "; 
 
}

<div id="wrapper"> 
 
    <div class="line">asdf</div> 
 
    <div class="line">asdfasdf</div> 
 
    <div class="line">asdfasdfasdfasdf</div> 
 
    <div class="line">asdf</div> 
 
</div>

---

また、出力値のスタイルを設定することができる1以上の数で値をインクリメント、等

0とは異なる数の基地値で始まります

.wrapper { 
 
    counter-reset: line-number 2; /* specifying a number in counter-reset means set the starting value as that number */ 
 
} 
 
.line { 
 
    counter-increment: line-number 2; /* specifying a number in counter-increment means increment the counter by that much every time */ 
 
} 
 
.line:before { 
 
    content: counter(line-number, lower-roman)": "; /* the second parameter represents the style of the output value */ 
 
} 
 

 
#wrapper2.wrapper .line:before { 
 
    content: counter(line-number, decimal-leading-zero)": "; 
 
}

<h3>Lower Roman Style with Base Value as 2 and increments of 2</h3> 
 
<div id="wrapper" class="wrapper"> 
 
    <div class="line">asdf</div> 
 
    <div class="line">asdfasdf</div> 
 
    <div class="line">asdfasdfasdfasdf</div> 
 
    <div class="line">asdf</div> 
 
</div> 
 

 
<h3>Decimal Leading Zero Style with Base Value as 2 and increments of 2</h3> 
 
<div id="wrapper2" class="wrapper"> 
 
    <div class="line">asdf</div> 
 
    <div class="line">asdfasdf</div> 
 
    <div class="line">asdfasdfasdfasdf</div> 
 
    <div class="line">asdf</div> 
 
</div>