Propiedad list-style de CSS
La propiedad list-style de CSS es una propiedad abreviada para las siguientes propiedades de lista:
Puedes establecer todas las propiedades en este orden: 1- list-style-type, 2- list-style-position, 3- list-style-image.
La propiedad list-style se puede establecer en un elemento de lista o en la lista de elementos (<ul> o <ol>) y ese estilo se aplicará en cascada a los elementos de la lista.
INFO
Si falta alguna de las propiedades anteriores, se establecerá automáticamente en el valor predeterminado.
| Valor inicial | disc outside none |
|---|---|
| Se aplica a | Elementos de lista. |
| Heredado | Sí. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.listStyle = "none"; |
Sintaxis
Sintaxis de la propiedad list-style de CSS
list-style: list-style-type list-style-position list-style-image | initial | inherit;Ejemplo de la propiedad list-style:
Ejemplo de la propiedad CSS list-style con valores square inside y circle
<!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 de la propiedad list-style donde se especifica el tipo de lista:
Ejemplo de la propiedad CSS list-style con valores 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 de la propiedad list-style donde se especifica la posición de la lista:
Ejemplo de la propiedad CSS list-style con valores inside y 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 de la propiedad list-style donde se establece una imagen como estilo de lista:
Ejemplo de la propiedad CSS list-style con el valor list-style-image
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style: url('https://es.w3docs.com/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 utiliza para definir el tipo de marcador del elemento de lista. Más información aquí: Propiedad list-style-type de CSS |
| list-style-position | Se utiliza para definir dónde se colocará el marcador del elemento de lista. Más información aquí: Propiedad list-style-position de CSS |
| list-style-image | Se utiliza para colocar una imagen en lugar de un marcador de elemento de lista. Más información aquí: Propiedad list-style-image de CSS |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles son los tipos de la propiedad CSS list-style?