counter()

試してみましょう

.double-list {
  counter-reset: count -1;
}

.double-list li {
  counter-increment: count 2;
}

.double-list li::marker {
  content: counter(count, decimal) ") ";
}

<p>Best Dynamic Duos in Sports:</p>
<ol class="double-list">
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
</ol>

構文

/* 単純な使用法 */
counter(counter-name);

/* カウンターの表示の変更 */
counter(counter-name, upper-roman)

カウンター自身には視覚的効果が何もありません。 counter() 関数 (および counters() 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。

値

counter() 関数は、最大 2 つの引数を受け入れます。最初の引数は <counter-name> です。 2 番目の引数はオプションで、 <counter-style> です。

<counter-name>

カウンターを識別する <custom-ident> であり、counter-reset および counter-increment に用いた名前と同じもので、大文字小文字を区別します。カウンター名は名前をダッシュ 2 つで始めることはできず、また none, unset, initial, inherit という名前にすることはできません。

<counter-style>

<list-style-type> 名、 <@counter-style> 名、 symbols() 関数の何れかです。カウンタースタイル名には numeric, alphabetic, symbolic などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で decimal になります。

形式文法

<counter()> = 
  counter( <counter-name> , <counter-style>? )  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

例

lower-roman と lower-alpha の比較

この例では、 lower-roman と lower-alpha のリストスタイルを使用してカウンターを表示します。

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content:
    "[" counter(count, lower-roman) "] == ["
    counter(count, lower-alpha) "]";
}

結果

3 つのスタイルを使用したカウンターの表示

この例では、 counter() 関数を 3 回使用しています。

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

私たちは、既定の小数点値を含む 3 種類の異なるカウンタースタイルを持つ counter() 関数を追加しました。長い ::marker 文字列のための空白を確保するために、リストにパディングを追加しました。

ol {
  counter-reset: listCounter;
  padding-left: 5em;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    "Item #" counter(listCounter) " is: ";
}
li::after {
  content:
    "[" counter(listCounter, decimal-leading-zero) "] == ["
    counter(listCounter, upper-roman) "]";
}

結果

仕様書

ブラウザーの互換性

関連情報

• CSS カウンターの使用
• counter-reset
• counter-set
• counter-increment
• @counter-style
• CSS の counters() 関数
• CSS リストとカウンターモジュール
• CSS カウンタースタイルモジュール
• CSS 生成コンテンツモジュール