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 は @counter-style アットルールの記述子で、独自のカウンタースタイルを定義する際に、負のカウンター値をどのように表すかを定義することができます。negative 記述子の値は、カウンターの値が負の場合に、カウンターの表現の前後に追加する記号を定義します。
構文
/* 単一の <symbol> 値 */
negative: "--"; /* 負の値の場合に先頭に '--' を付ける */
/* 2 つの <symbol> 値 */
negative: "(" ")"; /* 負の値の場合に '(' と ')' で囲む */
値
negative 記述子は、最大 2 つの <symbol> 値を受け入れます。
<symbol>-
1 つの値のみを指定した場合、カウンターが負の値の場合、その値がカウンターの表現の前に追加されます。 2 つの値を指定した場合、カウンターが負の値の場合、最初の値はカウンターの表現の前に追加され、 2 つ目の値はカウンターの表現の後ろに追加されます。
解説
カウンター値が負の場合、 negative 記述子に指定された <symbol> が、カウンター表現の前に追加され、負の値の既定値 - を置き換えます。2 つ目の <symbol> が指定されている場合、カウンター表現の後に追加されます。
negative 記述子は、 2 つの場合に適用されます。カウンタースタイルの system 値が symbolic、alphabetic、numeric、additive で、カウントが負の場合、および system 値が extends で、拡張カウンタースタイル自体が負の符号を使用している場合です。負のカウンター値に対応していないシステムでは、 negative 記述子を指定しても効果はなく、無視されます。
公式定義
| 関連するアット規則 | @counter-style |
|---|---|
| 初期値 | "-" hyphen-minus |
| 計算値 | 指定通り |
形式文法
negative =
<symbol> <symbol>?
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
負のカウンターを描画する
この例では、decimal リストスタイルを拡張しています。 negative 記述子は、負のカウンター値の前後に (- および ) を追加するために使用されます。
HTML
<ol start="-3">
<li>Negative three</li>
<li>Negative two</li>
<li>Negative one</li>
<li>Zero</li>
<li>One</li>
</ol>
CSS
@counter-style neg {
system: extends decimal;
negative: "(-" ")";
suffix: ": ";
}
ol {
list-style: neg;
}
結果
negative 記述子の値として掲載されている接頭辞および接尾辞は、カウンター値が 0 未満の場合にのみマーカーに追加されます。
仕様書
| Specification |
|---|
| CSS Counter Styles Level 3 # counter-style-system |
ブラウザーの互換性
Loading…
関連情報
@counter-style記述子:system,symbols,additive-symbols,prefix,suffix,range,pad,speak-as,fallback- リストスタイルのプロパティ:
list-style,list-style-image,list-style-position symbols(), 無名のカウンタースタイルを生成する関数記法。- CSS カウンタースタイルモジュール
- CSS リストとカウンターモジュール