negative
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
Définition formelle
En lien avec les règles @ | @counter-style |
---|---|
Valeur initiale | "-" hyphen-minus |
Valeur calculée | comme spécifié |
Syntaxe formelle
negative =
<symbol> <symbol>?
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<gradient>
<url> =
url( <string> <url-modifier>* ) |
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
BCD tables only load in the browser
Voir aussi
list-style
,list-style-image
,list-style-position
,symbols()
, la notation fonctionnelle pour créer des styles de compteur anonymes.