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
関連情報
list-style
,list-style-image
,list-style-position
symbols()
, 無名のカウンタースタイルを生成する関数記法。