Proprietà CSS list-style-type

La proprietà CSS list-style-type imposta il marcatore di un elemento di lista — il punto elenco, il numero o la lettera mostrati prima di ogni elemento. Permette di cambiare una lista non ordinata dal punto elenco predefinito pieno a un cerchio vuoto o a un quadrato, modificare una lista ordinata da 1, 2, 3 a numeri romani o lettere, oppure rimuovere completamente il marcatore.

Cosa copre questa proprietà

Un marcatore di lista può essere di tre tipi:

Glifi — una forma semplice: disc (il punto elenco pieno predefinito), circle (un anello vuoto) o square.
Sistemi di numerazione — contatori come decimal, decimal-leading-zero, lower-roman, upper-roman, armenian, georgian, cjk-ideographic, hebrew, hiragana e katakana.
Sistemi alfabetici — sequenze di lettere come lower-alpha/lower-latin (a, b, c) e upper-alpha/upper-latin (A, B, C), più lower-greek (α, β, γ).

Il colore del marcatore corrisponde al valore calcolato di color dell'elemento a cui si applica, quindi modificare il colore del testo cambia anche il colore del marcatore. Puoi scegliere un colore dal riferimento colori HTML.

Quando e dove usarla

Solo gli elementi il cui valore display è list-item mostrano un marcatore. Per impostazione predefinita ciò riguarda gli elementi <li> e <summary>, ma puoi applicare questo comportamento a qualsiasi elemento impostando display: list-item. In pratica si imposta list-style-type sul <ul> o <ol> genitore e la si lascia ereditare ai singoli <li> — la proprietà si eredita, quindi i figli non ne hanno bisogno.

Usa list-style-type: none quando desideri un menu di navigazione pulito o un layout personalizzato senza punti elenco. I valori numerici e alfabetici funzionano sia su <ul> che su <ol>, ma sono più significativi su <ol>, dove ogni elemento rappresenta un passaggio o una posizione classificata.

list-style-type è una delle tre proprietà di lista che la proprietà abbreviata list-style raggruppa — le altre due sono list-style-position (marcatore dentro o fuori il riquadro del contenuto) e list-style-image (un marcatore immagine personalizzato, che ha la precedenza sul tipo quando impostato).

Valore iniziale	disc
Si applica a	Elementi di lista.
Ereditata	Sì.
Animabile	No.
Versione	CSS1
Sintassi DOM	object.style.listStyleType = "armenian";

Sintassi

Sintassi della proprietà CSS list-style-type

list-style-type: disc | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | none | square | upper-alpha | upper-latin | upper-roman | initial | inherit;

Esempio della proprietà list-style-type:

Esempio della proprietà CSS list-style-type con i valori square e hebrew

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.list-styles {
        list-style-type: square;
      }
      ul.list-styles2 {
        list-style-type: hebrew;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <ul class="list-styles">
      <li>Appetizers</li>
      <li>Main Course</li>
      <li>Salads</li>
    </ul>
    <ul class="list-styles2">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio della proprietà list-style-type con il valore "disc":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property with "disc" value.
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà list-style-type con il valore "decimal":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: decimal;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property 
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà list-style-type con liste ordinate:

Esempio della proprietà CSS list-style-type con i valori circle, square, upper-roman, lower-alpha, armenian, decimal, cjk-ideographic, georgian, upper-alpha e altri

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.a {
        list-style-type: circle;
      }
      ul.b {
        list-style-type: square;
      }
      ol.c {
        list-style-type: upper-roman;
      }
      ol.d {
        list-style-type: lower-alpha;
      }
      ol.e {
        list-style-type: armenian;
      }
      ol.f {
        list-style-type: decimal;
      }
      ol.g {
        list-style-type: cjk-ideographic;
      }
      ol.h {
        list-style-type: decimal-leading-zero;
      }
      ol.i {
        list-style-type: georgian;
      }
      ol.j {
        list-style-type: hebrew;
      }
      ol.k {
        list-style-type: hiragana;
      }
      ol.l {
        list-style-type: hiragana-iroha;
      }
      ol.m {
        list-style-type: katakana;
      }
      ol.n {
        list-style-type: katakana-iroha;
      }
      ol.o {
        list-style-type: lower-greek;
      }
      ol.p {
        list-style-type: lower-latin;
      }
      ol.q {
        list-style-type: lower-roman;
      }
      ol.r {
        list-style-type: none;
      }
      ol.s {
        list-style-type: upper-alpha;
      }
      ol.t {
        list-style-type: upper-latin;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <p>Examples of unordered lists:</p>
    <h3>Circle</h3>
    <ul class="a">
      <li>New York</li>
      <li>Las Vegas</li>
      <li>Washington</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>San Francisco</li>
      <li>Los Angeles</li>
      <li>Miami</li>
    </ul>
    <p>Examples of ordered lists:</p>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Dubai</li>
      <li>Anu Dhabi</li>
      <li>Qatar</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Yerevan</li>
      <li>Paris</li>
      <li>Rome</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Sydney</li>
      <li>Honk Kong</li>
      <li>Moscow</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Kiev</li>
      <li>Saint-Petersburg</li>
      <li>Tula</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Bangkok</li>
      <li>Gyumri</li>
      <li>Valencia</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Madrid</li>
      <li>Barcelona</li>
      <li>Prague</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Jerusalem</li>
      <li>Toronto</li>
      <li>Prague</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Cairo</li>
      <li>Tokyo</li>
      <li>Athens</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Tehran</li>
      <li>Tavriz</li>
      <li>Tel Aviv</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Munich</li>
      <li>Berlin</li>
      <li>Bavaria</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Brussels</li>
      <li>Istanbul</li>
      <li>Sydney</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Seville</li>
      <li>Granada</li>
      <li>Venice</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Budapest</li>
      <li>Vienna</li>
      <li>Amsterdam</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Buenos Aires</li>
      <li>Rio de Janeiro</li>
      <li>San Paolo</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Vilnius</li>
      <li>Tallin</li>
      <li>Riga</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Montreal</li>
      <li>Melbourne</li>
      <li>Edinburgh</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Dublin</li>
      <li>Mexico</li>
      <li>Florence</li>
    </ol>
  </body>
</html>

Provalo tu stesso »

Cose da tenere a mente

Il colore del marcatore segue il colore del testo. Non esiste una proprietà separata per il colore del punto elenco; imposta il color del <li> (o del suo genitore) e il marcatore cambia insieme ad esso. Per colorare il marcatore in modo indipendente, usa lo pseudo-elemento ::marker.
list-style-image ha la precedenza su list-style-type. Se una lista ha anche un list-style-image, viene mostrata l'immagine e il tipo agisce solo come fallback quando il caricamento dell'immagine fallisce.
Rimuovere il marcatore non rimuove il rientro. list-style-type: none nasconde il punto elenco, ma la lista conserva comunque il padding sinistro predefinito del browser. Aggiungi padding-left: 0 (e spesso margin: 0) per appiattire completamente una lista — un passaggio comune nella creazione di menu di navigazione.
Usa l'elemento di lista corretto per i valori ordinati. I valori numerici e letterali vengono visualizzati anche su <ul>, ma per accessibilità e semantica, i contenuti classificati o sequenziali appartengono a un <ol>.

Valori

Valore	Descrizione	Prova
disc	Crea un marcatore come cerchio pieno. È il valore predefinito di questa proprietà.	Prova »
armenian	Crea un marcatore con la numerazione armena tradizionale.	Prova »
circle	Crea un marcatore come cerchio.	Prova »
cjk-ideographic	Crea un marcatore con numeri ideografici semplici.	Prova »
decimal	Crea un marcatore come numero.	Prova »
decimal-leading-zero	Crea un marcatore come numero con zero iniziale, ad esempio 01, 02, 05...	Prova »
georgian	Crea un marcatore con la numerazione georgiana tradizionale.	Prova »
hebrew	Crea un marcatore con la numerazione ebraica tradizionale.	Prova »
hiragana	Crea un marcatore con la numerazione hiragana tradizionale.	Prova »
hiragana-iroha	Crea un marcatore con la numerazione hiragana iroha tradizionale.	Prova »
katakana	Crea un marcatore con la numerazione katakana tradizionale.	Prova »
katakana-iroha	Crea un marcatore con la numerazione katakana iroha tradizionale.	Prova »
lower-alpha	Crea un marcatore con lettere minuscole, ad esempio a, b, c, d...	Prova »
lower-greek	Crea un marcatore con lettere greche minuscole.	Prova »
lower-latin	Crea un marcatore con lettere latine minuscole, ad esempio a, b, c, d...	Prova »
lower-roman	Crea un marcatore con numeri romani minuscoli, ad esempio i, ii, iii, iv...	Prova »
none	Indica che il marcatore non verrà mostrato.	Prova »
square	Crea un marcatore come quadrato.	Prova »
upper-alpha	Crea un marcatore con lettere maiuscole, ad esempio A, B, C, D...	Prova »
upper-latin	Crea un marcatore con lettere latine maiuscole, ad esempio A, B, C, D...	Prova »
upper-roman	Crea un marcatore con numeri romani maiuscoli, ad esempio I, II, III, IV, V...	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento genitore.

Esercizio

Pratica

Cosa specifica la proprietà list-style-type in CSS?

Il marcatore usato in una lista.Il colore dell'elemento di lista.Lo stile dei punti elenco o della numerazione usati in una lista.La dimensione del testo in una lista.