`list-style-type` CSS property

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft list-style-type legt die Markierung (z. B. einen Punkt, ein Zeichen oder einen benutzerdefinierten Zählerstil) eines Listeneintragelements fest.

Probieren Sie es aus

list-style-type: space-counter;

list-style-type: disc;

list-style-type: circle;

list-style-type: "\1F44D";

<section class="default-example" id="default-example">
  <div>
    <p>NASA Notable Missions</p>
    <ul class="transition-all unhighlighted" id="example-element">
      <li>Apollo</li>
      <li>Hubble</li>
      <li>Chandra</li>
      <li>Cassini-Huygens</li>
    </ul>
  </div>
  <hr />
  <div class="note">
    <p>
      <code>space-counter</code> is defined with
      <a
        href="//developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@counter-style"
        target="_parent"
        ><code>@counter-style</code></a
      >
    </p>
  </div>
</section>

.default-example {
  font-size: 1.2rem;
}

#example-element {
  width: 100%;
  background: #be094b;
  color: white;
}

section {
  text-align: left;
  flex-direction: column;
}

hr {
  width: 50%;
  color: lightgray;
  margin: 0.5em;
}

.note {
  font-size: 0.8rem;
}

.note a {
  color: #009e5f;
}

@counter-style space-counter {
  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

Syntax

css

/* Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;

/* <string> value */
list-style-type: "-";

/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;

/* Keyword value */
list-style-type: none;

/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;

Die Eigenschaft list-style-type kann als einer der folgenden Werte definiert werden:

ein <custom-ident>-Wert,
ein symbols()-Wert,
ein <string>-Wert oder
das Schlüsselwort none.

Beachten Sie:

Einige Typen erfordern eine geeignete installierte Schriftart, um wie erwartet dargestellt zu werden.
cjk-ideographic ist mit trad-chinese-informal identisch; es existiert aus Gründen der Abwärtskompatibilität.

Werte

<custom-ident>: Ein Bezeichner, der dem Wert eines @counter-style oder einem der vordefinierten Stile entspricht:
symbols(): Definiert einen anonymen Stil der Liste.
<string>: Die angegebene Zeichenfolge wird als Markierung des Listeneintrags verwendet.
none: Es wird keine Markierung für Listeneinträge angezeigt.
disc: Ein ausgefüllter Kreis (Standardwert).
circle: Ein hohler Kreis.
square: Ein ausgefülltes Quadrat.
decimal: Dezimalzahlen, beginnend bei 1.
cjk-decimal: Han-Dezimalzahlen.
decimal-leading-zero: Dezimalzahlen, mit führenden Nullen aufgefüllt.
lower-roman: Römische Ziffern in Kleinbuchstaben.
upper-roman: Römische Ziffern in Großbuchstaben.
lower-greek: Klassisches Griechisch in Kleinbuchstaben.
lower-alpha, lower-latin: ASCII-Buchstaben in Kleinbuchstaben.
upper-alpha, upper-latin: ASCII-Buchstaben in Großbuchstaben.
arabic-indic, -moz-arabic-indic: Arabisch-indische Zahlen.
armenian: Traditionelle armenische Nummerierung.
bengali, -moz-bengali: Bengalische Nummerierung.
cambodian/khmer: Kambodschanische/Khmer-Nummerierung.
cjk-earthly-branch, -moz-cjk-earthly-branch: Han-Ordnungszahlen für „Earthly Branch“.
cjk-heavenly-stem, -moz-cjk-heavenly-stem: Han-Ordnungszahlen für „Heavenly Stem“.
cjk-ideographic: Identisch mit trad-chinese-informal.
devanagari, -moz-devanagari: Devanagari-Nummerierung.
ethiopic-numeric: Äthiopische Nummerierung.
georgian: Traditionelle georgische Nummerierung.
gujarati, -moz-gujarati: Gujarati-Nummerierung.
gurmukhi, -moz-gurmukhi: Gurmukhi-Nummerierung.
hebrew: Traditionelle hebräische Nummerierung.
hiragana: Hiragana-Buchstaben in Wörterbuchreihenfolge.
hiragana-iroha: Hiragana-Buchstaben in Iroha-Reihenfolge.
japanese-formal: Japanische formale Nummerierung zur Verwendung in juristischen oder finanziellen Dokumenten. Die Kanji sind so gestaltet, dass sie nicht verändert werden können, um wie ein anderes korrektes Zeichen auszusehen.
japanese-informal: Japanische informelle Nummerierung.
kannada, -moz-kannada: Kannada-Nummerierung.
katakana: Katakana-Buchstaben in Wörterbuchreihenfolge.
katakana-iroha: Katakana-Buchstaben in Iroha-Reihenfolge.
korean-hangul-formal: Koreanische Hangul-Nummerierung.
korean-hanja-formal: Formale koreanische Han-Nummerierung.
korean-hanja-informal: Koreanische Hanja-Nummerierung.
lao, -moz-lao: Laotische Nummerierung.
lower-armenian: Armenische Nummerierung in Kleinbuchstaben.
malayalam, -moz-malayalam: Malayalam-Nummerierung.
mongolian: Mongolische Nummerierung.
myanmar, -moz-myanmar: Myanmar- (birmanische) Nummerierung.
oriya, -moz-oriya: Oriya-Nummerierung.
persian, -moz-persian: Persische Nummerierung.
simp-chinese-formal: Vereinfachte chinesische formale Nummerierung.
simp-chinese-informal: Vereinfachte chinesische informelle Nummerierung.
tamil, -moz-tamil: Tamilische Nummerierung.
telugu, -moz-telugu: Telugu-Nummerierung.
thai, -moz-thai: Thailändische Nummerierung.
tibetan: Tibetische Nummerierung.
trad-chinese-formal: Traditionelle chinesische formale Nummerierung.
trad-chinese-informal: Traditionelle chinesische informelle Nummerierung.
upper-armenian: Traditionelle armenische Nummerierung in Großbuchstaben.
disclosure-open: Symbol, das anzeigt, dass ein Offenlegungs-Widget wie <details> geöffnet ist.
disclosure-closed: Symbol, das anzeigt, dass ein Offenlegungs-Widget wie <details> geschlossen ist.

Im Beispiel Alle Listenstiltypen können Sie die oben genannten Werte in Aktion sehen. Details zu allen verfügbaren Zählerstilen, die von verschiedenen Kulturen weltweit verwendet werden, finden Sie unter vorgefertigte Zählerstile.

Nicht standardmäßige Erweiterungen

Mozilla (Firefox) unterstützt einige vordefinierte Typen mit dem Präfix -moz-.

ethiopic-halehame: -moz-ethiopic-halehame
ethiopic-halehame-am: -moz-ethiopic-halehame-am
ethiopic-halehame-ti-er: -moz-ethiopic-halehame-ti-er
ethiopic-halehame-ti-et: -moz-ethiopic-halehame-ti-et
ethiopic-numeric: -moz-ethiopic-numeric
hangul: -moz-hangul
hangul-consonant: -moz-hangul-consonant
urdu: -moz-urdu

In der Kompatibilitätstabelle können Sie prüfen, welche Browser welche Erweiterung unterstützen.

Beschreibung

Die Eigenschaft list-style-type legt die Markierung (z. B. einen Punkt, ein Zeichen oder einen benutzerdefinierten Zählerstil) eines Listeneintragelements fest. Die Markierung verwendet currentColor, also denselben berechneten color-Wert wie das Element, auf das sie angewendet wird.

Nur wenige Elemente (<li> und <summary>) haben standardmäßig den Wert display: list-item. Die Eigenschaft list-style-type kann jedoch auf jedes Element angewendet werden, dessen display-Wert auf list-item gesetzt ist.

Vererbung des Listenstils

Da list-style-type vererbt wird, kann es auf einem übergeordneten Element (üblicherweise <ol> oder <ul>) gesetzt werden, damit es auf dessen Listeneinträge angewendet wird. User-Agent-Stylesheets setzen list-style-type jedoch auf <ul>-, <ol>- und <menu>-Elementen, sodass verschachtelte Listen diese Standardwerte verwenden, anstatt den Wert der übergeordneten Liste zu erben. Damit verschachtelte Listen diesen Wert erben, setzen Sie list-style-type: inherit auf den verschachtelten Listenelementen.

Zum Beispiel in Fällen wie diesem:

html

<ul>
  <li>One</li>
  <li>Two</li>
  <li>
    Three
    <ul>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>
  </li>
</ul>

In denen ein benutzerdefinierter Stil auf der äußeren Liste gesetzt ist:

css

body > ul {
  list-style-type: square;
}

Erbt die innere Liste den benutzerdefinierten Stil nicht, es sei denn, Sie legen fest, dass sie ihn erben soll:

css

ul ul {
  list-style-type: inherit;
}

Barrierefreiheit

Safari erkennt eine geordnete oder ungeordnete Liste im Barrierefreiheitsbaum nicht als Liste, wenn sie den Wert none für list-style-type hat. Dies kann behoben werden, indem role="list" zum öffnenden Tag der Liste hinzugefügt wird. Weitere Informationen hierzu und zu möglichen Problemumgehungen finden Sie unter list-style.

Formale Definition

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

Formale Syntax

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

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

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

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

<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

Markierungen für Listeneinträge festlegen

HTML

html

List 1
<ol class="normal">
  <li>Hello</li>
  <li>World</li>
  <li>What's up?</li>
</ol>

List 2
<ol class="shortcut">
  <li>Looks</li>
  <li>Like</li>
  <li>The</li>
  <li>Same</li>
</ol>

CSS

css

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

/* or use the shortcut "list-style": */
ol.shortcut {
  list-style: upper-alpha;
}

Ergebnis

Alle Listenstiltypen

HTML

html

<ol>
  <li>Apollo</li>
  <li>Hubble</li>
  <li>Chandra</li>
  <li>Cassini-Huygens</li>
  <li>Spitzer</li>
</ol>

<h2>Choose a list style type:</h2>

<div class="container">
  <label for="disc">
    <input type="radio" id="disc" name="type" value="disc" />disc
  </label>

  <label for="circle">
    <input type="radio" id="circle" name="type" value="circle" />circle
  </label>

  <label for="square">
    <input type="radio" id="square" name="type" value="square" />square
  </label>

  <label for="decimal">
    <input type="radio" id="decimal" name="type" value="decimal" />decimal
  </label>

  <label for="cjk-decimal">
    <input
      type="radio"
      id="cjk-decimal"
      name="type"
      value="cjk-decimal" />cjk-decimal
  </label>

  <label for="decimal-leading-zero">
    <input
      type="radio"
      id="decimal-leading-zero"
      name="type"
      value="decimal-leading-zero" />decimal-leading-zero
  </label>

  <label for="lower-roman">
    <input
      type="radio"
      id="lower-roman"
      name="type"
      value="lower-roman" />lower-roman
  </label>

  <label for="upper-roman">
    <input
      type="radio"
      id="upper-roman"
      name="type"
      value="upper-roman" />upper-roman
  </label>

  <label for="lower-greek">
    <input
      type="radio"
      id="lower-greek"
      name="type"
      value="lower-greek" />lower-greek
  </label>

  <label for="lower-alpha">
    <input
      type="radio"
      id="lower-alpha"
      name="type"
      value="lower-alpha" />lower-alpha, lower-latin
  </label>

  <label for="upper-alpha">
    <input
      type="radio"
      id="upper-alpha"
      name="type"
      value="upper-alpha" />upper-alpha, upper-latin
  </label>

  <label for="arabic-indic">
    <input
      type="radio"
      id="arabic-indic"
      name="type"
      value="arabic-indic" />arabic-indic
  </label>

  <label for="armenian">
    <input type="radio" id="armenian" name="type" value="armenian" />armenian
  </label>

  <label for="bengali">
    <input type="radio" id="bengali" name="type" value="bengali" />bengali
  </label>

  <label for="cambodian">
    <input type="radio" id="cambodian" name="type" value="cambodian" />cambodian
  </label>

  <label for="cjk-earthly-branch">
    <input
      type="radio"
      id="cjk-earthly-branch"
      name="type"
      value="cjk-earthly-branch" />cjk-earthly-branch
  </label>

  <label for="cjk-heavenly-stem">
    <input
      type="radio"
      id="cjk-heavenly-stem"
      name="type"
      value="cjk-heavenly-stem" />cjk-heavenly-stem
  </label>

  <label for="cjk-ideographic">
    <input
      type="radio"
      id="cjk-ideographic"
      name="type"
      value="cjk-ideographic" />cjk-ideographic
  </label>

  <label for="devanagari">
    <input
      type="radio"
      id="devanagari"
      name="type"
      value="devanagari" />devanagari
  </label>

  <label for="ethiopic-numeric">
    <input
      type="radio"
      id="ethiopic-numeric"
      name="type"
      value="ethiopic-numeric" />ethiopic-numeric
  </label>

  <label for="georgian">
    <input type="radio" id="georgian" name="type" value="georgian" />georgian
  </label>

  <label for="gujarati">
    <input type="radio" id="gujarati" name="type" value="gujarati" />gujarati
  </label>

  <label for="gurmukhi">
    <input type="radio" id="gurmukhi" name="type" value="gurmukhi" />gurmukhi
  </label>

  <label for="hebrew">
    <input type="radio" id="hebrew" name="type" value="hebrew" />hebrew
  </label>

  <label for="hiragana">
    <input type="radio" id="hiragana" name="type" value="hiragana" />hiragana
  </label>

  <label for="hiragana-iroha">
    <input
      type="radio"
      id="hiragana-iroha"
      name="type"
      value="hiragana-iroha" />hiragana-iroha
  </label>

  <label for="japanese-formal">
    <input
      type="radio"
      id="japanese-formal"
      name="type"
      value="japanese-formal" />japanese-formal
  </label>

  <label for="japanese-informal">
    <input
      type="radio"
      id="japanese-informal"
      name="type"
      value="japanese-informal" />japanese-informal
  </label>

  <label for="kannada">
    <input type="radio" id="kannada" name="type" value="kannada" />kannada
  </label>

  <label for="katakana">
    <input type="radio" id="katakana" name="type" value="katakana" />katakana
  </label>

  <label for="katakana-iroha">
    <input
      type="radio"
      id="katakana-iroha"
      name="type"
      value="katakana-iroha" />katakana-iroha
  </label>

  <label for="khmer">
    <input type="radio" id="khmer" name="type" value="khmer" />khmer
  </label>

  <label for="korean-hangul-formal">
    <input
      type="radio"
      id="korean-hangul-formal"
      name="type"
      value="korean-hangul-formal" />korean-hangul-formal
  </label>

  <label for="korean-hanja-formal">
    <input
      type="radio"
      id="korean-hanja-formal"
      name="type"
      value="korean-hanja-formal" />korean-hanja-formal
  </label>

  <label for="korean-hanja-informal">
    <input
      type="radio"
      id="korean-hanja-informal"
      name="type"
      value="korean-hanja-informal" />korean-hanja-informal
  </label>

  <label for="lao">
    <input type="radio" id="lao" name="type" value="lao" />lao
  </label>

  <label for="lower-armenian">
    <input
      type="radio"
      id="lower-armenian"
      name="type"
      value="lower-armenian" />lower-armenian
  </label>

  <label for="malayalam">
    <input type="radio" id="malayalam" name="type" value="malayalam" />malayalam
  </label>

  <label for="mongolian">
    <input type="radio" id="mongolian" name="type" value="mongolian" />mongolian
  </label>

  <label for="myanmar">
    <input type="radio" id="myanmar" name="type" value="myanmar" />myanmar
  </label>

  <label for="oriya">
    <input type="radio" id="oriya" name="type" value="oriya" />oriya
  </label>

  <label for="persian">
    <input type="radio" id="persian" name="type" value="persian" />persian
  </label>

  <label for="simp-chinese-formal">
    <input
      type="radio"
      id="simp-chinese-formal"
      name="type"
      value="simp-chinese-formal" />simp-chinese-formal
  </label>

  <label for="simp-chinese-informal">
    <input
      type="radio"
      id="simp-chinese-informal"
      name="type"
      value="simp-chinese-informal" />simp-chinese-informal
  </label>

  <label for="tamil">
    <input type="radio" id="tamil" name="type" value="tamil" />tamil
  </label>

  <label for="telugu">
    <input type="radio" id="telugu" name="type" value="telugu" />telugu
  </label>

  <label for="thai">
    <input type="radio" id="thai" name="type" value="thai" />thai
  </label>

  <label for="tibetan">
    <input type="radio" id="tibetan" name="type" value="tibetan" />tibetan
  </label>

  <label for="trad-chinese-formal">
    <input
      type="radio"
      id="trad-chinese-formal"
      name="type"
      value="trad-chinese-formal" />trad-chinese-formal
  </label>

  <label for="trad-chinese-informal">
    <input
      type="radio"
      id="trad-chinese-informal"
      name="type"
      value="trad-chinese-informal" />trad-chinese-informal
  </label>

  <label for="upper-armenian">
    <input
      type="radio"
      id="upper-armenian"
      name="type"
      value="upper-armenian" />upper-armenian
  </label>

  <label for="disclosure-open">
    <input
      type="radio"
      id="disclosure-open"
      name="type"
      value="disclosure-open" />disclosure-open
  </label>

  <label for="disclosure-closed">
    <input
      type="radio"
      id="disclosure-closed"
      name="type"
      value="disclosure-closed" />disclosure-closed
  </label>

  <label for="moz-ethiopic-halehame">
    <input
      type="radio"
      id="moz-ethiopic-halehame"
      name="type"
      value="-moz-ethiopic-halehame" />-moz-ethiopic-halehame
  </label>

  <label for="moz-ethiopic-halehame-am">
    <input
      type="radio"
      id="moz-ethiopic-halehame-am"
      name="type"
      value="-moz-ethiopic-halehame-am" />-moz-ethiopic-halehame-am
  </label>

  <label for="ethiopic-halehame-ti-er">
    <input
      type="radio"
      id="ethiopic-halehame-ti-er"
      name="type"
      value="ethiopic-halehame-ti-er" />ethiopic-halehame-ti-er
  </label>

  <label for="ethiopic-halehame-ti-et">
    <input
      type="radio"
      id="ethiopic-halehame-ti-et"
      name="type"
      value="ethiopic-halehame-ti-et" />ethiopic-halehame-ti-et
  </label>

  <label for="hangul">
    <input type="radio" id="hangul" name="type" value="hangul" />hangul
  </label>

  <label for="hangul-consonant">
    <input
      type="radio"
      id="hangul-consonant"
      name="type"
      value="hangul-consonant" />hangul-consonant
  </label>

  <label for="urdu">
    <input type="radio" id="urdu" name="type" value="urdu" />urdu
  </label>

  <label for="moz-ethiopic-halehame-ti-er">
    <input
      type="radio"
      id="moz-ethiopic-halehame-ti-er"
      name="type"
      value="-moz-ethiopic-halehame-ti-er" />-moz-ethiopic-halehame-ti-er
  </label>

  <label for="moz-ethiopic-halehame-ti-et">
    <input
      type="radio"
      id="moz-ethiopic-halehame-ti-et"
      name="type"
      value="-moz-ethiopic-halehame-ti-et" />-moz-ethiopic-halehame-ti-et
  </label>

  <label for="moz-hangul">
    <input
      type="radio"
      id="moz-hangul"
      name="type"
      value="-moz-hangul" />-moz-hangul
  </label>

  <label for="moz-hangul-consonant">
    <input
      type="radio"
      id="moz-hangul-consonant"
      name="type"
      value="-moz-hangul-consonant" />-moz-hangul-consonant
  </label>

  <label for="moz-urdu">
    <input type="radio" id="moz-urdu" name="type" value="-moz-urdu" />-moz-urdu
  </label>
</div>

CSS

css

ol {
  font-size: 1.2rem;
}

.container {
  column-count: 3;
}

label {
  display: block;
}

input {
  margin: 0.4rem;
}

JavaScript

const container = document.querySelector(".container");
const list = document.querySelector("ol");

container.addEventListener("change", (event) => {
  list.setAttribute("style", `list-style-type: ${event.target.value}`);
});

Ergebnis

Wir sind nicht auf die auf dieser Seite oder in der Spezifikation definierten Listenstiltypen beschränkt. Die At-Regel @counter-style ermöglicht das Erstellen von Zählern mit beliebigen Alphabeten.