Propriedade CSS list-style
Propriedade abreviada para definir list-style-type, list-style-position e list-style-image. Veja exemplos práticos.
A propriedade CSS list-style é uma abreviação que permite definir três propriedades de marcador de lista em uma única declaração:
list-style-type— o formato do marcador ou estilo de contador (disc,circle,square,decimal,lower-roman,none…).list-style-position— se o marcador ficaoutsideda caixa de conteúdo (o padrão) ouinsidedela.list-style-image— uma imagem a ser usada como marcador no lugar do tipo definido.
Esta página aborda a sintaxe abreviada, como seus valores mapeiam para as três propriedades individuais e as formas mais comuns de utilizá-la na prática.
Como a abreviação funciona
Você pode listar os valores em qualquer ordem, mas a ordem convencional é tipo → posição → imagem:
list-style: square inside url('marker.png');Não é necessário fornecer os três valores. Qualquer propriedade individual omitida é redefinida para seu valor inicial — portanto, escrever list-style: square equivale a list-style: square outside none. Essa redefinição é o motivo pelo qual uma abreviação pode silenciosamente desfazer um list-style-position definido anteriormente em outro lugar, então prefira as propriedades individuais quando quiser alterar apenas uma parte.
A propriedade pode ser aplicada a um item de lista ou à própria lista (<ul> ou <ol>), onde ela cascateia para todos os itens dessa lista.
Quando você fornece tanto um list-style-type quanto um list-style-image, o tipo funciona como fallback: a imagem é exibida se carregar corretamente, e o marcador do tipo aparece caso a imagem esteja ausente ou falhe ao carregar. Manter um valor de tipo é uma boa rede de segurança.
Para ocultar os marcadores completamente, use list-style: none; — útil para menus de navegação criados com listas <ul>.
| Valor Inicial | disc outside none |
|---|---|
| Aplica-se a | Itens de lista. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.listStyle = "none"; |
Sintaxe
list-style: list-style-type list-style-position list-style-image | initial | inherit;Exemplo com marcadores circle e square inside
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
list-style: circle;
}
.example2 {
list-style: square inside;
}
</style>
</head>
<body>
List 1
<ul class="example1">
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ul>
List 2
<ul class="example2">
<li>List Item A</li>
<li>List Item B</li>
<li>List Item C</li>
</ul>
</body>
</html>Resultado
Exemplo definindo o tipo de marcador (lower-greek e lower-latin)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul:nth-of-type(1) {
list-style: lower-greek;
}
ul:nth-of-type(2) {
list-style: lower-latin;
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</body>
</html>Exemplo definindo a posição do marcador (inside vs outside)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inside {
list-style: inside;
}
.outside {
list-style: outside;
}
li {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<h3>List-style is positioned "inside":</h3>
<ul class="inside">
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
<h3>List-style is positioned "outside":</h3>
<ul class="outside">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
</body>
</html>Exemplo usando uma imagem como marcador
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style: url('/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png');
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<ul>
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| list-style-type | É usado para definir o tipo do marcador do item de lista. Veja mais aqui: Propriedade CSS list-style-type |
| list-style-position | É usado para definir onde o marcador do item de lista será posicionado. Veja mais aqui: Propriedade CSS list-style-position |
| list-style-image | É usado para colocar uma imagem no lugar do marcador do item de lista. Veja mais aqui: Propriedade CSS list-style-image |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |