Propiedad CSS list-style
Propiedad abreviada para definir list-style-type, list-style-position y list-style-image en CSS. Ver ejemplos.
La propiedad CSS list-style es una abreviatura que permite establecer tres propiedades de marcadores de lista en una sola declaración:
list-style-type— la forma del marcador o el estilo de contador (disc,circle,square,decimal,lower-roman,none…).list-style-position— si el marcador se sitúaoutside(fuera) del cuadro de contenido (valor predeterminado) oinside(dentro) de él.list-style-image— una imagen que se usa como marcador en lugar del tipo estándar.
Esta página cubre la sintaxis abreviada, cómo sus valores se corresponden con las tres propiedades individuales y las formas más habituales de usarla en la práctica.
Cómo funciona la propiedad abreviada
Puedes indicar los valores en cualquier orden, aunque el orden convencional es tipo → posición → imagen:
list-style: square inside url('marker.png');No es obligatorio proporcionar los tres valores. Cualquier propiedad individual que omitas se restablece a su valor inicial — así, escribir list-style: square equivale a list-style: square outside none. Ese restablecimiento es la razón por la que una propiedad abreviada puede deshacer silenciosamente un list-style-position definido anteriormente en otro lugar, por lo que es preferible usar las propiedades individuales cuando solo quieres cambiar una parte.
La propiedad puede aplicarse a un elemento de lista, o a la lista en sí misma (<ul> o <ol>), donde se hereda en cascada por todos los elementos de esa lista.
Cuando proporcionas tanto un list-style-type como un list-style-image, el tipo actúa como alternativa de respaldo: se muestra la imagen si se carga correctamente, y el marcador de tipo aparece si la imagen falta o no se puede cargar. Mantener un valor de tipo es una buena red de seguridad.
Para ocultar los marcadores por completo, usa list-style: none; — muy útil para menús de navegación construidos con listas <ul>.
| Valor inicial | disc outside none |
|---|---|
| Se aplica a | Elementos de lista. |
| Heredable | Sí. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.listStyle = "none"; |
Sintaxis
list-style: list-style-type list-style-position list-style-image | initial | inherit;Ejemplo con marcadores circle y 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
Ejemplo con tipo de marcador (lower-greek y 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>Ejemplo con la posición del 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>Ejemplo usando una imagen 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 | Descripción |
|---|---|
| list-style-type | Se usa para definir el tipo de marcador del elemento de lista. Ver más aquí: Propiedad CSS list-style-type |
| list-style-position | Se usa para definir dónde se colocará el marcador del elemento de lista. Ver más aquí: Propiedad CSS list-style-position |
| list-style-image | Se usa para colocar una imagen en lugar del marcador del elemento de lista. Ver más aquí: Propiedad CSS list-style-image |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad del elemento padre. |