negative

Baseline 2023

Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

カスタムカウンターのスタイルを定義する際、 negative 記述子により、値が負のときにカウンターの表現に付加または前置する記号を指定する方法を提供することで、負のカウンターの表現を変更することができます。

構文

css

/* <symbol> 値 */
negative: "-"; /* 負の値の場合に先頭に '-' を付ける */
negative: "(" ")"; /* 負の値の場合に '(' と ')' で囲む */

値

first <symbol>: カウンターが負の時に、この記号がその表現の前に付きます。
second <symbol>: 存在する場合、カウンターが負の時に、この記号がその表現の後に追加されます。

カウンターの値が負の場合、記述子の値として指定された記号がカウンター表現の前に置かれ、指定された場合は 2 番目の記号が表現の後に追加されます。 negative 記述子は、 system の値が symbolic, alphabetic, numeric, additive, extends の何れかで、拡張カウンタースタイル自体が負の符号を使用している場合のみ有効になります。負のカウンター値に対応していない他のシステムで negative 記述子が指定された場合、その記述子は無視されます。

公式定義

関連するアット規則	`@counter-style`
初期値	`"-" hyphen-minus`
計算値	指定通り

形式文法

<symbol> <symbol>?

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>

例

負のカウンターを描画する

HTML

html

<ol class="list" start="-3">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

CSS

css

@counter-style neg {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  negative: "(-" ")";
}

.list {
  list-style: neg;
}

結果

仕様書

Specification
CSS Counter Styles Level 3 # counter-style-system

ブラウザーの互換性

BCD tables only load in the browser