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
  1. Numerierte Einträge
  2. 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>).

Initialwertdisc
Anwendbar aufListenelemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

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 This is an experimental API that should not be used in production code.
  • 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 This is an experimental API that should not be used in production code. *
  • 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 This is an experimental API that should not be used in production code.
  • Identisch zu trad-chinese-informal
  • Z. B. 一萬一千一百一十一
devanagari
-moz-devanagari
  • Beispiel
ethiopic-numeric This is an experimental API that should not be used in production code.
  • Beispiel
georgian
  • Traditionelle georgische Nummerierung
  • z. B. an, ban, gan, … he, tan, in…
gujarati
-moz-gujarati
  • Beispiel
gurmukhi
-moz-gurmukhi
  • Beispiel
hebrew This is an experimental API that should not be used in production code.
  • Traditionelle hebräische Nummerierung
hiragana This is an experimental API that should not be used in production code.
  • a, i, u, e, o, ka, ki, …
  • (Japanisch)
hiragana-iroha This is an experimental API that should not be used in production code.
  • i, ro, ha, ni, ho, he, to, …
  • Iroha ist die alte japanische Silbenreihenfolge.
japanese-formal This is an experimental API that should not be used in production code.
  • 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 This is an experimental API that should not be used in production code.
  • Formlose japanische Nummerierung
kannada
-moz-kannada
  • Beispiel
katakana This is an experimental API that should not be used in production code.
  • A, I, U, E, O, KA, KI, …
  • (Japanisch)
katakana-iroha This is an experimental API that should not be used in production code.
  • I, RO, HA, NI, HO, HE, TO, …
  • Iroha ist die alte japanische Silbenreihenfolge.
khmer
-moz-khmer
  • Beispiel
korean-hangul-formal This is an experimental API that should not be used in production code.
  • Koreanische Hangul-Nummerierung
  • z. B. 일만 일천일백일십일
korean-hanja-formal This is an experimental API that should not be used in production code.
  • Formelle koreanische Han-Nummerierung
  • z. B. 壹萬 壹仟壹百壹拾壹
korean-hanja-informal This is an experimental API that should not be used in production code.
  • Koreanische Hanja-Nummerierung
  • z. B. 萬 一千百十一
lao
-moz-lao
  • Beispiel
lower-armenian This is an experimental API that should not be used in production code. *
  • Beispiel
malayalam
-moz-malayalam
  • Beispiel
mongolian This is an experimental API that should not be used in production code.
  • Beispiel
myanmar
-moz-myanmar
  • Beispiel
oriya
-moz-oriya
  • Beispiel
persian This is an experimental API that should not be used in production code.
-moz-persian
  • Beispiel
simp-chinese-formal This is an experimental API that should not be used in production code.
  • Formelle Nummerierung in vereinfachtem Chinesisch
  • z. B. 壹万壹仟壹佰壹拾壹
simp-chinese-informal This is an experimental API that should not be used in production code.
  • Formlose Nummerierung in vereinfachtem Chinesisch
  • z. B. 一万一千一百一十一
tamil This is an experimental API that should not be used in production code.
-moz-tamil
  • Beispiel
telugu
-moz-telugu
  • Beispiel
thai
-moz-thai
  • Beispiel
tibetan This is an experimental API that should not be used in production code. *
  • Beispiel
trad-chinese-formal This is an experimental API that should not be used in production code.
  • Formelle Nummerierung in traditionellem Chinesisch
  • z. B. 壹萬壹仟壹佰壹拾壹
trad-chinese-informal This is an experimental API that should not be used in production code.
  • Formlose Nummerierung in traditionellem Chinesisch
  • z. B. 一萬一千一百一十一
upper-armenian This is an experimental API that should not be used in production code. *
  • Beispiel
disclosure-open This is an experimental API that should not be used in production code.
  • Zeigt an, dass der zugehörige Seitenbereich (etwa <details>) sichtbar ist.
disclosure-closed This is an experimental API that should not be used in production code.
  • 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

<counter-style> | <string> | none

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

wobei
<counter-style-name> = <custom-ident>

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