Propriedade CSS list-style-type

A propriedade CSS list-style-type define o marcador de um item de lista — o ponto, número ou letra exibido antes de cada item. Ela permite trocar em uma lista não ordenada o ponto sólido padrão por um círculo vazado ou quadrado, alterar uma lista ordenada de 1, 2, 3 para algarismos romanos ou letras, ou remover o marcador por completo.

O que esta propriedade cobre

Um marcador de lista pode ser de três tipos:

Glifos — uma forma simples: disc (o ponto preenchido padrão), circle (um anel vazado) ou square.
Sistemas de numeração — contadores como decimal, decimal-leading-zero, lower-roman, upper-roman, armenian, georgian, cjk-ideographic, hebrew, hiragana e katakana.
Sistemas alfabéticos — sequências de letras como lower-alpha/lower-latin (a, b, c) e upper-alpha/upper-latin (A, B, C), além de lower-greek (α, β, γ).

A cor do marcador acompanha o valor calculado de color do elemento ao qual se aplica, portanto estilizar a cor do texto também recolore o marcador. Você pode escolher uma cor na referência de cores HTML.

Quando e onde usar

Apenas elementos cujo valor de display seja list-item exibem um marcador. Por padrão, isso inclui os elementos <li> e <summary>, mas você pode aplicar esse comportamento a qualquer elemento definindo display: list-item. Na prática, define-se list-style-type no elemento pai <ul> ou <ol> e a propriedade é herdada por cada <li> — a propriedade herda, portanto os filhos não precisam dela.

Use list-style-type: none quando quiser um menu de navegação limpo ou um layout personalizado sem marcadores. Os valores de numeração e alfabéticos funcionam em <ul> e <ol>, mas fazem mais sentido em <ol>, onde cada item representa uma etapa ou posição ordenada.

list-style-type é uma das três propriedades de lista que o atalho list-style agrupa — as outras duas são list-style-position (marcador dentro ou fora da caixa de conteúdo) e list-style-image (um marcador de imagem personalizado, que substitui o tipo quando definido).

Valor Inicial	disc
Aplica-se a	Itens de lista.
Herdada	Sim.
Animável	Não.
Versão	CSS1
Sintaxe DOM	object.style.listStyleType = "armenian";

Sintaxe

Sintaxe da Propriedade 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;

Exemplo da propriedade list-style-type:

Exemplo da Propriedade CSS list-style-type com os valores 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>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade list-style-type com o 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>

Experimente Você Mesmo »

Exemplo da propriedade list-style-type com o 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>

Experimente Você Mesmo »

Exemplo da propriedade list-style-type com listas ordenadas:

Exemplo da Propriedade CSS list-style-type com os valores circle, square, upper-roman, lower-alpha, armenian, decimal, cjk-ideographic, georgian, upper-alpha e outros

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

Experimente Você Mesmo »

Pontos importantes

A cor do marcador segue a cor do texto. Não existe uma propriedade separada para a cor do marcador; defina a color do <li> (ou de seu pai) e o marcador muda junto. Para colorir o marcador de forma independente, use o pseudo-elemento ::marker.
list-style-image prevalece sobre list-style-type. Se uma lista também tiver list-style-image, a imagem é exibida e o tipo funciona apenas como fallback quando a imagem não carrega.
Remover o marcador não remove o recuo. list-style-type: none oculta o ponto, mas a lista ainda tem o padding esquerdo padrão do navegador. Adicione padding-left: 0 (e muitas vezes margin: 0) para achatar completamente uma lista — etapa comum ao construir menus de navegação.
Use o elemento de lista correto para valores ordenados. Os valores de numeração e letras também renderizam em <ul>, mas para acessibilidade e semântica, conteúdo classificado ou sequencial deve estar em um <ol>.

Valores

Valor	Descrição	Experimente
disc	Cria o marcador como um círculo preenchido. É o valor padrão desta propriedade.	Experimente »
armenian	Cria o marcador como numeração armênia tradicional.	Experimente »
circle	Cria o marcador como um círculo.	Experimente »
cjk-ideographic	Cria o marcador com números ideográficos simples.	Experimente »
decimal	Cria o marcador como um número.	Experimente »
decimal-leading-zero	Cria o marcador como um número com zero à esquerda, como 01, 02, 05...	Experimente »
georgian	Cria o marcador como numeração georgiana tradicional.	Experimente »
hebrew	Cria o marcador como numeração hebraica tradicional.	Experimente »
hiragana	Cria o marcador como numeração hiragana tradicional.	Experimente »
hiragana-iroha	Cria o marcador como numeração hiragana iroha tradicional.	Experimente »
katakana	Cria o marcador como numeração katakana tradicional.	Experimente »
katakana-iroha	Cria o marcador como numeração katakana iroha tradicional.	Experimente »
lower-alpha	Cria o marcador em lower-alpha, como a, b, c, d...	Experimente »
lower-greek	Cria o marcador em lower-greek.	Experimente »
lower-latin	Cria o marcador em lower-latin, como a, b, c, d...	Experimente »
lower-roman	Cria o marcador em lower-roman, como i, ii, iii, iv...	Experimente »
none	Indica que o marcador não será exibido.	Experimente »
square	Cria o marcador como um quadrado.	Experimente »
upper-alpha	Cria o marcador em upper-alpha, como A, B, C, D...	Experimente »
upper-latin	Cria o marcador em upper-latin, como A, B, C, D...	Experimente »
upper-roman	Cria o marcador em upper-roman, como I, II, III, IV, V...	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade de seu elemento pai.

Prática

O que a propriedade list-style-type em CSS especifica?

O marcador usado em uma lista.A cor do item de lista.O estilo de marcadores ou numeração usados em uma lista.O tamanho do texto em uma lista.