Propiedad CSS list-style-type

La propiedad CSS list-style-type define el marcador de un elemento de lista — la viñeta, número o letra que aparece antes de cada elemento. Permite cambiar una lista desordenada del punto sólido predeterminado a un círculo vacío o un cuadrado, cambiar una lista ordenada de 1, 2, 3 a números romanos o letras, o eliminar el marcador por completo.

Qué cubre esta propiedad

Un marcador de lista puede ser de tres tipos:

Glifos — una forma simple: disc (la viñeta rellena predeterminada), circle (un anillo vacío) o square.
Sistemas de numeración — contadores como decimal, decimal-leading-zero, lower-roman, upper-roman, armenian, georgian, cjk-ideographic, hebrew, hiragana y katakana.
Sistemas alfabéticos — secuencias de letras como lower-alpha/lower-latin (a, b, c) y upper-alpha/upper-latin (A, B, C), además de lower-greek (α, β, γ).

El color del marcador coincide con el valor calculado de color del elemento al que se aplica, por lo que cambiar el color del texto también cambia el color del marcador. Puedes elegir un color de la referencia de colores HTML.

Cuándo y dónde usarlo

Solo los elementos cuyo valor de display es list-item muestran un marcador. Por defecto, eso significa los elementos <li> y <summary>, pero puedes aplicar este comportamiento a cualquier elemento estableciendo display: list-item. En la práctica, se define list-style-type en el elemento padre <ul> o <ol> y se deja que se herede en cada <li> — la propiedad hereda, por lo que los hijos no la necesitan.

Usa list-style-type: none cuando quieras un menú de navegación limpio o una maquetación personalizada sin viñetas. Los valores numéricos y alfabéticos funcionan tanto en <ul> como en <ol>, pero son más significativos en <ol>, donde cada elemento representa un paso o una posición clasificada.

list-style-type es una de las tres propiedades de lista que la propiedad abreviada list-style agrupa — las otras dos son list-style-position (marcador dentro o fuera del cuadro de contenido) y list-style-image (un marcador de imagen personalizado, que anula el tipo cuando está definido).

Valor inicial	disc
Aplicable a	Elementos de lista.
Heredada	Sí.
Animable	No.
Versión	CSS1
Sintaxis DOM	object.style.listStyleType = "armenian";

Sintaxis

Sintaxis de la propiedad 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;

Ejemplo de la propiedad list-style-type:

Ejemplo de la propiedad CSS list-style-type con los valores square y 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>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad list-style-type con el valor "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>

Pruébalo tú mismo »

Ejemplo de la propiedad list-style-type con el valor "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>

Pruébalo tú mismo »

Ejemplo de la propiedad list-style-type con listas ordenadas:

Ejemplo de la propiedad CSS list-style-type con los valores circle, square, upper-roman, lower-alpha, armenian, decimal, cjk-ideographic, georgian, upper-alpha y otros

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

Pruébalo tú mismo »

Aspectos a tener en cuenta

El color del marcador sigue el color del texto. No existe una propiedad separada para el color de la viñeta; establece el color del <li> (o su elemento padre) y el marcador cambiará con él. Para colorear el marcador de forma independiente, usa el pseudoelemento ::marker.
list-style-image tiene prioridad sobre list-style-type. Si una lista también tiene list-style-image, se muestra la imagen y el tipo solo actúa como alternativa cuando la imagen no se carga.
Eliminar el marcador no elimina la sangría. list-style-type: none oculta la viñeta, pero la lista sigue teniendo el relleno izquierdo predeterminado del navegador. Añade padding-left: 0 (y frecuentemente margin: 0) para aplanar completamente una lista — un paso habitual al crear menús de navegación.
Usa el elemento de lista correcto para valores ordenados. Los valores numéricos y de letras también se renderizan en <ul>, pero para accesibilidad y semántica, el contenido clasificado o secuencial pertenece a un <ol>.

Valores

Valor	Descripción	Pruébalo
disc	Crea el marcador como un círculo relleno. Es el valor predeterminado de esta propiedad.	Pruébalo »
armenian	Crea el marcador con numeración armenia tradicional.	Pruébalo »
circle	Crea el marcador como un círculo.	Pruébalo »
cjk-ideographic	Crea el marcador con números ideográficos simples.	Pruébalo »
decimal	Crea el marcador como un número.	Pruébalo »
decimal-leading-zero	Crea el marcador como un número con cero inicial, como 01, 02, 05...	Pruébalo »
georgian	Crea el marcador con numeración georgiana tradicional.	Pruébalo »
hebrew	Crea el marcador con numeración hebrea tradicional.	Pruébalo »
hiragana	Crea el marcador con numeración hiragana tradicional.	Pruébalo »
hiragana-iroha	Crea el marcador con numeración hiragana iroha tradicional.	Pruébalo »
katakana	Crea el marcador con numeración katakana tradicional.	Pruébalo »
katakana-iroha	Crea el marcador con numeración katakana iroha tradicional.	Pruébalo »
lower-alpha	Crea el marcador en minúsculas como a, b, c, d...	Pruébalo »
lower-greek	Crea el marcador en letras griegas minúsculas.	Pruébalo »
lower-latin	Crea el marcador en latín minúsculo como a, b, c, d...	Pruébalo »
lower-roman	Crea el marcador en números romanos minúsculos como i, ii, iii, iv...	Pruébalo »
none	Indica que no se mostrará ningún marcador.	Pruébalo »
square	Crea el marcador como un cuadrado.	Pruébalo »
upper-alpha	Crea el marcador en mayúsculas como A, B, C, D...	Pruébalo »
upper-latin	Crea el marcador en latín mayúsculo como A, B, C, D...	Pruébalo »
upper-roman	Crea el marcador en números romanos mayúsculos como I, II, III, IV, V...	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué especifica la propiedad list-style-type en CSS?

El marcador usado en una lista.El color del elemento de lista.El estilo de las viñetas o la numeración usada en una lista.El tamaño del texto en una lista.