negative

Syntax

/* One <symbol> value */
negative: "--"; /* Adds '--' before if counter value is negative */

/* Two <symbol> values */
negative: "(" ")"; /* Adds '(- before and ')' after if counter value is negative */

Werte

Der negative Deskriptor akzeptiert bis zu zwei <symbol>-Werte.

<symbol>

Wenn nur ein Wert angegeben ist, wird er vor der Zählerdarstellung hinzugefügt, wenn der Zähler negativ ist. Wenn zwei Werte angegeben sind, wird der erste vor und der zweite nach der Zählerdarstellung hinzugefügt, wenn der Zähler negativ ist.

Beschreibung

Wenn der Zählerwert negativ ist, wird das angegebene <symbol> für den negative Deskriptor vor der Zählerdarstellung hinzugefügt und ersetzt das Standard-- für negative Werte. Das zweite <symbol>, falls angegeben, wird nach der Zählerdarstellung hinzugefügt.

Der negative Deskriptor ist in zwei Fällen relevant: wenn Zählerstile den system-Wert symbolic, alphabetic, numeric und additive haben und die Zählung negativ ist; und wenn der system-Wert extends ist und der erweiterte Zählerstil selbst ein Minuszeichen verwendet. Für Systeme, die negative Zählerwerte nicht unterstützen, hat die Angabe des negative Deskriptors keine Auswirkung und wird ignoriert.

Formale Definition

Formale Syntax

negative = 
  <symbol> <symbol>?  

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

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Beispiele

Darstellung negativer Zähler

Dieses Beispiel erweitert den decimal Listenstil. Der negative Deskriptor wird verwendet, um (- und ) vor und nach negativen Zählerwerten hinzuzufügen.

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;
}

Ergebnis

Das als Wert des negative Deskriptors aufgelistete Präfix und Suffix wird nur zum Marker hinzugefügt, wenn der Zählerwert kleiner als null ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @counter-style Deskriptoren: system, symbols, additive-symbols, prefix, suffix, range, pad, speak-as, fallback
• Listeneigenschaften: list-style, list-style-image, list-style-position
• symbols() Funktion zur Erstellung anonymer Zählerstile
• CSS-Zählerstile Modul
• CSS-Listen und Zähler Modul