list-style-type

Übersicht

Die CSS-Eigenschaft list-style-type bestimmt, wie die Einträge einer Liste ausgezeichnet werden. Übliche Arten sind etwa Punkte oder eine Nummerierung vor jedem Eintrag:

Erster Eintrag
Zweiter Eintrag

Numerierte Einträge
Numerierte Einträge

Meist wird diese Eigenschaft mit dem <li>-Element in Verbindung gebracht. Tatsächlich kann es sich jedoch um jedes beliebige Element handeln, dessen display-Eigenschaft list-item ist.

Hinweis: list-style-type ist eine Eigenschaft von Listenelementen, nicht von Listen. Da sie vererbt wird, kann sie jedoch statt beim Listenelement selbst auch bei seinem Elternelement gesetzt werden (in der Regel <ol> or <ul>).

Initialwert	`disc`
Anwendbar auf	Listenelemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Syntax

Werte

none: Es wird kein Aufzählungszeichen angezeigt.
<string>: Der gebene, in Anführungszeichen gesetzte Text wird vor jedem Listeneintrag angezeigt. Beispiel: list-style-type: '-'
symbols() (en-US): Statt über @counter-style (en-US) eine Aufzählungsweise zu definieren, kann dies mit der Funktion symbols() auch direkt in der Eigenschaft list-style-type geschehen.
Da diese Aufzählungsweise im Gegensatz zu per @counter-style definierten keinen Namen hat, wird sie auch als "anonym" bezeichnet.
<custom-ident>: Ein Bezeichner, der dem Wert einer @counter-style (en-US)-Regel entspricht oder einem der folgenden Stile:

disc

Ein gefüllter Kreis (Standardwert)

circle

Ein leerer Kreis

square

Ein gefülltes Quadrat

decimal

Dezimalzahlen
Beginnend bei 1

cjk-decimal Experimental

Han-Dezimalzahlen
z. B. 一, 二, 三, ..., 九八, 九九, 一〇〇

decimal-leading-zero

Dezimalzahlen
Aufgefüllt mit vorangestellten Nullen
z. B. 01, 02, 03, … 98, 99

lower-roman

Kleingeschriebene römische Zahlen
E.g. i, ii, iii, iv, v…

upper-roman

Großgeschriebene römische Zahlen
E.g. I, II, III, IV, V…

lower-greek

Kleingeschriebene griechische Zahlworte
Alpha, Beta, Gamma…
z. B. α, β, γ…

lower-alpha

lower-latin

Kleingeschriebene lateinische Buchstaben
z. B. a, b, c, … z
lower-latin wird nicht von IE7 und früher unterstützt
Siehe den Unterpunkt Browser-Kompatibilität.

upper-alpha

upper-latin

Großgeschriebene lateinische Buchstaben
z. B. A, B, C, … Z
upper-latin wird nicht von IE7 und früher unterstützt

arabic-indic

-moz-arabic-indic

Beispiel

armenian

Traditionelle armenische Nummerierung
z. B. ayb/ayp, ben/pen, gim/keem…

bengali

-moz-bengali

Beispiel

cambodian Experimental *

Beispiel
Ist ein Synonym für Khmer

cjk-earthly-branch

-moz-cjk-earthly-branch

Beispiel

cjk-heavenly-stem

-moz-cjk-heavenly-stem

Beispiel

cjk-ideographic Experimental

Identisch zu trad-chinese-informal
Z. B. 一萬一千一百一十一

devanagari

-moz-devanagari

Beispiel

ethiopic-numeric Experimental

Beispiel

georgian

Traditionelle georgische Nummerierung
z. B. an, ban, gan, … he, tan, in…

gujarati

-moz-gujarati

Beispiel

gurmukhi

-moz-gurmukhi

Beispiel

hebrew Experimental

Traditionelle hebräische Nummerierung

hiragana Experimental

a, i, u, e, o, ka, ki, …
(Japanisch)

hiragana-iroha Experimental

i, ro, ha, ni, ho, he, to, …
Iroha ist die alte japanische Silbenreihenfolge.

japanese-formal Experimental

Formelle japanische Nummerierung, wie sie in juristischen oder Wirtschaftsdokumenten verwendet wird.
z. B. 壱萬壱阡壱百壱拾壱
Änderungen an der Gestaltung der Kanji-Schriftzeichen, die zu Verwechslungen mit anderen führen könnten, werden unterdrückt.

japanese-informal Experimental

Formlose japanische Nummerierung

kannada

-moz-kannada

Beispiel

katakana Experimental

A, I, U, E, O, KA, KI, …
(Japanisch)

katakana-iroha Experimental

I, RO, HA, NI, HO, HE, TO, …
Iroha ist die alte japanische Silbenreihenfolge.

khmer

-moz-khmer

Beispiel

korean-hangul-formal Experimental

Koreanische Hangul-Nummerierung
z. B. 일만 일천일백일십일

korean-hanja-formal Experimental

Formelle koreanische Han-Nummerierung
z. B. 壹萬壹仟壹百壹拾壹

korean-hanja-informal Experimental

Koreanische Hanja-Nummerierung
z. B. 萬一千百十一

lao

-moz-lao

Beispiel

lower-armenian Experimental *

Beispiel

malayalam

-moz-malayalam

Beispiel

mongolian Experimental

Beispiel

myanmar

-moz-myanmar

Beispiel

oriya

-moz-oriya

Beispiel

persian Experimental

-moz-persian

Beispiel

simp-chinese-formal Experimental

Formelle Nummerierung in vereinfachtem Chinesisch
z. B. 壹万壹仟壹佰壹拾壹

simp-chinese-informal Experimental

Formlose Nummerierung in vereinfachtem Chinesisch
z. B. 一万一千一百一十一

tamil Experimental

-moz-tamil

Beispiel

telugu

-moz-telugu

Beispiel

thai

-moz-thai

Beispiel

tibetan Experimental *

Beispiel

trad-chinese-formal Experimental

Formelle Nummerierung in traditionellem Chinesisch
z. B. 壹萬壹仟壹佰壹拾壹

trad-chinese-informal Experimental

Formlose Nummerierung in traditionellem Chinesisch
z. B. 一萬一千一百一十一

upper-armenian Experimental *

Beispiel

disclosure-open Experimental

Zeigt an, dass der zugehörige Seitenbereich (etwa <details>) sichtbar ist.

disclosure-closed Experimental

Zeigt an, dass der zugehörige Seitenbereich (etwa <details>) versteckt ist.

Nicht standardisierte Erweiterungen

Zusätzliche Werte, die von Gecko (Firefox), Blink (Chrome und Opera) und WebKit (Safari) unterstützt werden, um Listenarten in anderen Sprachen anzubieten. Die Kompatibilitätstabelle weiter unten gibt nähere Auskunft zu den einzelnen Browsern.

-moz-ethiopic-halehame

Beispiel

-moz-ethiopic-halehame-am

Beispiel

ethiopic-halehame-ti-er

-moz-ethiopic-halehame-ti-er

Beispiel

ethiopic-halehame-ti-et

-moz-ethiopic-halehame-ti-et

Beispiel

hangul

-moz-hangul

Beispiel
Beispiel
Beispiel

hangul-consonant

-moz-hangul-consonant

Beispiel
Beispiel
Beispiel

urdu

-moz-urdu

Beispiel

Formale Syntax

list-style-type = 
  <counter-style>  |
  <string>         |
  none             

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

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

<gradient> = 
  <linear-gradient()>            |
  <repeating-linear-gradient()> (en-US)  |
  <radial-gradient()>            |
  <repeating-radial-gradient()> (en-US)  

<image-tags> = 
  ltr  |
  rtl  

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

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         |
  <device-cmyk()>        

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

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

<id-selector> = 
  <hash-token>  

<linear-gradient()> = 
  linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )  

<radial-gradient()> = 
  radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )  

<absolute-color-base> = 
  <hex-color> (en-US)    |
  <named-color>  |
  transparent    |
  <rgb()>        |
  <rgba()>       |
  <hsl()>        |
  <hsla()>       |
  <hwb()>        |
  <lab()>        |
  <lch()>        |
  <oklab()>      |
  <oklch()>      |
  <color()>      

<device-cmyk()> = 
  device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#  

<position> = 
  [ left | center | right | top | bottom | start | end | <length-percentage> ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ]  |
  [ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]  

<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<cmyk-component> = 
  <number>      |
  <percentage>  

<alpha-value> = 
  <number>      |
  <percentage>  

<linear-color-stop> = 
  <color>               &&
  <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

<hue> = 
  <number>  |
  <angle>   |
  none      

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

Beispiele

CSS

ol.normal {
  list-style-type: upper-alpha;
}

/* Es kann auch die Kurzschreibweise "list-style" verwendet werden: */
ol.shortcut {
  list-style: upper-alpha;
}

HTML

<ol class="normal">Liste 1
  <li>Hallo</li>
  <li>Welt</li>
  <li>Was gibt's?</li>
</ol>

<ol class="shortcut">Liste 2
  <li>Schaut</li>
  <li>Gleich</li>
  <li>aus</li>
</ol>

Ergebnis

Hinweise

Manche Listenarten setzen für die korrekte Darstellung voraus, dass eine passende Schriftart installiert ist.
cjk-ideographic ist identisch zu trad-chinese-informal; es existiert lediglich aus Gründen der Rückwärtskompatibilität.

Spezifikationen

Spezifikation	Status	Kommentar
CSS Lists Module Level 3 Die Definition von 'list-style-type' in dieser Spezifikation.	Arbeitsentwurf	Definiert CSS2.1-Zähler neu. Erweitert die Syntax um Unterstützung für `@counter-style-`Regeln. Definiert unter Verwendung von `@counter-style` die üblichen Stiltypen: `hebrew`, `cjk-ideographic`, `hiragana`, `hiragana-iroha`, `katakana`, `katakana-iroha`, `japanese-formal`, `japanese-informal`, `simp-chinese-formal`, `trad-chinese-formal`, `simp-chinese-formal`, `trad-chinese-formal`,`korean-hangul-formal`, `korean-hanja-informal`, `korean-hanja-formal`, `cjk-decimal`, `ethiopic-numeric`, `disclosure-open` und `disclosure-closed`. Erweitert `<counter-style>` um die Funktion `symbols()`.
CSS Level 2 (Revision 1) Die Definition von 'list-style-type' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Browserkompatibilität

BCD tables only load in the browser

Siehe auch

list-style, list-style-image, list-style-position