Propriedade List Style (Shorthand)
Última atualização: 2026-09-13
list-style Propriedade List Style (Shorthand)
list-style é o shorthand para list-style-type, list-style-position e list-style-image, definindo todos os aspectos dos marcadores de item de lista de uma vez. O padrão é disc outside none. É a forma mais eficiente de controlar a aparência da lista, comumente usada para personalizar ou redefinir estilos de lista rapidamente.
| Categoria | |
|---|---|
| Valor Inicial | disc outside none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
list-style: <list-style-type> || <list-style-position> || <list-style-image>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<list-style-type> || <list-style-position> || <list-style-image> | Valor | Shorthand de estilo de lista |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| list-style | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： list-style: none é comumente usado em barras de navegação e lugares semelhantes para remover os marcadores padrão da lista.
Dica： As sub-propriedades não especificadas no shorthand voltam aos seus padrões, então list-style: none limpa tanto o type quanto o image.
❓ Perguntas Frequentes
QQual é a diferença entre list-style: none e display: block?
Alist-style: none só remove o marcador à frente de cada item; o li continua sendo um item de lista com sua semântica intacta, e leitores de tela ainda reconhecem a lista. display: block muda o elemento para renderização em nível de bloco, o que pode afetar a semântica e como a tecnologia assistiva entende a estrutura da lista. Para redefinir a aparência da lista, list-style: none é suficiente — não há necessidade de mudar display.
QA ordem dos valores no shorthand list-style importa?
ANão há ordem rígida — os navegadores distinguem valores pelo tipo — mas a ordem recomendada é type, position, image, por exemplo list-style: square inside none;. Observe que as sub-propriedades não especificadas são redefinidas para seus padrões, então list-style: none limpa tanto type quanto image.
QQual é a diferença entre list-style: none e padding-left: 0?
Alist-style: none só remove os símbolos de marcador; o recuo esquerdo padrão do navegador (cerca de 40px de padding) permanece. Para alinhar a lista com o texto ao redor, combine list-style: none; padding-left: 0; margin: 0;. Esse é o trio de reset clássico — menus de navegação horizontais removem os pontos e o recuo dessa forma.
QQuais sub-propriedades o shorthand list-style redefine?
AQualquer sub-propriedade omitida é redefinida para seu padrão: type para disc, position para outside e image para none. Então, se você definir uma imagem com list-style-image primeiro e depois escrever list-style: inside;, a imagem é limpa. Quando quiser mudar apenas uma sub-propriedade, use seu longhand diretamente para se manter seguro.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade list-style-type
Define o tipo de marcador da lista
Propriedade list-style-position
Define a posição do marcador
