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.

Le descripteur negative, associé à la règle @ @counter-style, permet de définir la représentation du compteur lorsque la valeur est négative.

css
/* Valeurs représentant les symboles */
negative: "-"; /* Préfixe '-' si la valeur est négative */
negative: "(" ")"; /* Entoure la valeur avec '(' et ')' si elle est négative */

Si la valeur du compteur est négative, le symbole fourni par le descripteur sera utilisé comme préfixe à la représentation du compteur. Un deuxième symbole peut être indiqué et est alors utilisé comme suffixe. Le descripteur negative n'a d'effet que si la valeur du descripteur system est symbolic, alphabetic, numeric, additive ou extends et si le compteur personnalisé utilise des indices négatifs. Dans les autres cas, si le descripteur negative est fourni, il est ignoré.

Syntaxe

Valeurs

Premier symbole

Le préfixe (type <symbol>) à ajouter à la représentation lorsque la valeur du compteur est négative.

Deuxième symbole Facultatif

Si cette valeur (type <symbol>) est présente, le symbole sera ajouté après la représentation du compteur lorsque sa valeur est négative.

Définition formelle

En lien avec les règles @@counter-style
Valeur initiale"-" hyphen-minus
Valeur calculéecomme spécifié

Syntaxe formelle

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>* )

Exemples

CSS

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

HTML

html
<ul class="exemple" start="-3">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
</ul>

Résultat

Spécifications

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

Compatibilité des navigateurs

Voir aussi