CSS/Eigenschaften/list-style-type

Browserunterstützung
caniuse.com

Die Eigenschaft list-style-type ermöglicht die Festlegung der Gestaltung des Aufzählungszeichens bzw. die Festlegung der Art der Nummerierung. Der gewählte Listenstil wird vom Browser als Inhalt des ::marker-Pseudoelements verwendet. Aus diesem Grund lässt sich mit list-style-type auch das Aufklappsymbol eines <summary>-Elements steuern.

Erlaubte Werte

• none = kein Bullet-Zeichen, keine Nummerierung
• einen vordefinierten Listenstil aus einer der Kategorien numerisch, alphabetisch, symbolisch oder fixed (die Kategorien werden im Anschluss beschrieben)
• eine mit symbols() festgelegte Liste von Zeichen oder Bildern (derzeit nur im Firefox)
• einen mit @counter-style selbst definierten Listenstil
• eine beliebige Zeichenkette (in einfachen oder doppelten Anführungszeichen). Sie wird vom Browser bündig vor den Listentext gestellt - wenn Sie Abstand zum Text wünschen, müssen Sie Leerstellen in die Zeichenkette einsetzen (Listenelemente verhalten sich immer so, als wäre für das ::marker-Element white-space:pre gesetzt). Für ein <summary>-Element müssen Sie hingegen explizit white-space:pre für das ::marker-Element setzen, damit Leerstellen im list-style-type beachtet werden.

Alle Werte sind für ungeordnete und geordnete Listen gleichermaßen erlaubt. Sie sollten aber darauf achten, einer geordneten Liste nur Listenstile zuzuweisen, die diesen Listencharakter erkennen lassen.

Die folgenden Listenstile sind vordefiniert:

numerisch

decimal (Nummerierung mit arabischen Ziffern), decimal-leading-zero (Zahlen mit führenen Nullen), lower-roman, upper-roman (römische Zahlen in Klein- und Großschreibung) sowie etliche weitere Stile für Zahlensysteme anderer Kulturen, die Sie bei Mozilla beziehungsweise in der Spezifikation finden können.

alphabetisch

lower-latin, upper-latin, lower-greek und weitere, für fernöstliche Sprachen. Zusätzlich gibt es als Erbe von CSS 1 noch lower-alpha und upper-alpha als Synonyme für die latin-Werte.

symbolisch

disc (•), circle (◦), square (▪), disclosure-open und disclosure-closed. Die letzen zwei entsprechen den "Geschlossen" und "Geöffnet"-Symbolen des <summary>-Elements, ihr Aussehen wird von der Spezifikation nicht festgelegt.

Eine ältere Version dieses Artikels beschrieb binäre, hexadezimale und andere Nummerierungen und auch weitere Symbolnamen, wie box, check, diamond oder dash, die aber aber kein Teil des Standards sind und auch nicht (mehr) in den Browsern implementiert sind. Beliebige Symbole können über die Zeichenketten-Variante von list-style-type geeignete Unicode-Zeichen verwenden, fortlaufende Symbole mit Hilfe der symbols()-Funktion oder des symbols-Systems von @counter-style, und Zähler in einem nichtdezimalen Zahlensystem über das numeric-System eines eigenen @counter-style.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

abhängig von Schachtelungstiefe und Browser

anwendbar auf

alle Elemente

Vererbung

ja

animierbar

nein

Beispiel

ul { list-style-type: '► Hier '; }

Als Aufzählungszeichen wird ein Dreieck, dann das Wort Hier, und anschließend zusätzlich ein Leerzeichen verwendet.

Beachten Sie: Der Safari entfernt bei list-style:none die Semantik der Liste. Hier gibt es zwei Lösungen

1. <ul style="list-style: none;" role="list">
2. <ul style="list-style-type: '';">

Der Browsersupport ist besser geworden, aber die symbols()-Funktion ist derzeit nur im Firefox vorhanden. Listenstile für nichteuropäische Kulturen sind sehr unterschiedlich implementiert, beachten Sie bitte die Angaben bei caniuse oder Mozilla.

Siehe auch

• HTML/Tutorials/Listen/Gestaltung mit CSS

Weblinks

• Spezifikation (W3C): list-style-type

• Details: caniuse.com