Articles
Introducción a CSS
Propiedades CSS relacionadas con listas

Propiedades CSS relacionadas con listas

Este artículo explica las propiedades CSS relacionadas con listas.

Puedes aprender a usar y escribir la propiedad list-style y la función counter().

YouTube Video

HTML para vista previa

css-list.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-list.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>List Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>List Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>list-style</h3>
 23            <section>
 24                <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
 25                <section class="sample-view">
 26                    <h5>Unordered List (ul)</h5>
 27                    <ul>
 28                        <li>Item 1</li>
 29                        <li>Item 2</li>
 30                        <li>Item 3</li>
 31                    </ul>
 32                </section>
 33                <header><h4>list-style: upper-roman outside</h4></header>
 34                <section class="sample-view">
 35                    <h5>Ordered List (ol)</h5>
 36                    <ol>
 37                        <li>First</li>
 38                        <li>Second</li>
 39                        <li>Third</li>
 40                    </ol>
 41                </section>
 42                <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
 43                <section class="sample-view">
 44                    <h5>Custom Bullet List</h5>
 45                    <ul class="custom-list">
 46                        <li>Custom Item 1</li>
 47                        <li>Custom Item 2</li>
 48                        <li>Custom Item 3</li>
 49                    </ul>
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>counter()</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58dl {
 59    counter-reset: item;
 60}
 61
 62dl dt::before {
 63    counter-increment: item; /* Increment the counter */
 64    content: counter(item) ". "; /* Display the counter */
 65}
 66</pre>
 67                <header><h4>HTML</h4></header>
 68<pre>
 69&lt;dl&gt;
 70    &lt;dt&gt;Term A&lt;/dt&gt;
 71    &lt;dd&gt;Explication for term A&lt;/dd&gt;
 72    &lt;dt&gt;Term B&lt;/dt&gt;
 73    &lt;dd&gt;Explication for term B&lt;/dd&gt;
 74    &lt;dt&gt;Term C&lt;/dt&gt;
 75    &lt;dd&gt;Explication for term C&lt;/dd&gt;
 76&lt;/dl&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <dl>
 81                        <dt>Term A</dt>
 82                        <dd>Explication for term A</dd>
 83                        <dt>Term B</dt>
 84                        <dd>Explication for term B</dd>
 85                        <dt>Term C</dt>
 86                        <dd>Explication for term C</dd>
 87                    </dl>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>counters()</h3>
 93            <section>
 94                <header><h4>CSS</h4></header>
 95<pre class="sample">
 96ol {
 97    list-style: none;
 98    counter-reset: list-counter;
 99}
100
101li {
102    counter-increment: list-counter;
103}
104
105li::before {
106    content: counters(list-counter, ".") " ";
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;ol&gt;
112    &lt;li&gt;Item A
113        &lt;ol&gt;
114            &lt;li&gt;Subitem A-1&lt;/li&gt;
115            &lt;li&gt;Subitem A-2&lt;/li&gt;
116        &lt;/ol&gt;
117    &lt;/li&gt;
118    &lt;li&gt;Item B
119        &lt;ol&gt;
120            &lt;li&gt;Subitem B-1&lt;/li&gt;
121        &lt;/ol&gt;
122    &lt;/li&gt;
123&lt;/ol&gt;
124</pre>
125                <header><h4>HTML+CSS</h4></header>
126                <section class="sample-view">
127                    <ol>
128                        <li>Item A
129                            <ol>
130                                <li>Subitem A-1</li>
131                                <li>Subitem A-2</li>
132                            </ol>
133                        </li>
134                        <li>Item B
135                            <ol>
136                                <li>Subitem B-1</li>
137                            </ol>
138                        </li>
139                    </ol>
140                </section>
141            </section>
142            <section>
143                <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146    counter-reset: chapter;
147}
148h1.chapter {
149    counter-increment: chapter;
150    counter-reset: section;
151}
152h1.chapter::before {
153    content: counter(chapter) " ";
154}
155h2.section {
156    counter-increment: section;
157    counter-reset: sub-section;
158}
159h2.section::before {
160    content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163    counter-increment: sub-section;
164}
165h3.sub-section::before {
166    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169                <header><h4>HTML</h4></header>
170<pre>
171&lt;h1 class=&quot;chapter&quot;&gt;Chapter A&lt;/h1&gt;
172&lt;h2 class=&quot;section&quot;&gt;Section A-1&lt;/h2&gt;
173&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-1&lt;/h3&gt;
174&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-2&lt;/h3&gt;
175
176&lt;h2 class=&quot;section&quot;&gt;Section A-2&lt;/h2&gt;
177&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-2-1&lt;/h3&gt;
178
179&lt;h1 class=&quot;chapter&quot;&gt;Chapter B&lt;/h1&gt;
180&lt;h2 class=&quot;section&quot;&gt;Section B-1&lt;/h2&gt;
181&lt;h3 class=&quot;sub-section&quot;&gt;Subsection B-1-1&lt;/h3&gt;
182</pre>
183                <header><h4>HTML+CSS</h4></header>
184                <section class="sample-view">
185                    <h1 class="chapter">Chapter A</h1>
186                    <h2 class="section">Section A-1</h2>
187                    <h3 class="sub-section">Subsection A-1-1</h3>
188                    <h3 class="sub-section">Subsection A-1-2</h3>
189
190                    <h2 class="section">Section A-2</h2>
191                    <h3 class="sub-section">Subsection A-2-1</h3>
192
193                    <h1 class="chapter">Chapter B</h1>
194                    <h2 class="section">Section B-1</h2>
195                    <h3 class="sub-section">Subsection B-1-1</h3>
196                </section>
197            </section>
198        </article>
199    </main>
200</body>
201</html>

Relacionado con listas

Propiedad list-style 

 1ul {
 2    list-style-type: circle; /* Empty circle bullets */
 3    list-style-position: inside; /* Position bullets inside the content area */
 4}
 5
 6ol {
 7    /* Uppercase Roman numerals with bullets positioned outside */
 8    list-style: upper-roman outside;
 9}
10
11.custom-list {
12    list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}

La propiedad list-style es una propiedad de CSS usada para especificar el estilo de los marcadores de lista (viñetas) o números para elementos de lista HTML como <ul> y <ol>. Esta propiedad te permite controlar el estilo general de la lista, siendo útil para personalizar la apariencia de las listas.

En este ejemplo, se aplican los siguientes estilos.

  • ul: Viñetas de círculo hueco se muestran dentro.
  • ol: Numeradas con números romanos en mayúsculas y los números se muestran fuera.
  • Clase custom-list: La imagen especificada se muestra como viñeta.

Estructura de list-style

list-style es una abreviatura para las siguientes tres propiedades:

  • list-style-type: Especifica el tipo de marcador (viñeta o número) para los elementos de lista.
  • list-style-position: Especifica si el marcador está colocado dentro (inside) o fuera (outside) del elemento de lista.
  • list-style-image: Especifica una imagen para usar como marcador de lista.

Uso básico 

1ul {
2    list-style: square inside url('path/to/image.png');
3}

Este código funciona de la siguiente manera:

  • list-style-type: square: Establece el tipo de marcador en una forma cuadrada.
  • list-style-position: inside: El marcador se muestra dentro del elemento de lista.
  • list-style-image: url('path/to/image.png'): Usa una imagen como marcador.

Explicación de las propiedades individuales

list-style-type

list-style-type especifica el tipo de marcador de la lista. Los estilos disponibles para usar dependen del tipo de lista.

Ejemplo de valor 
 1ul {
 2    /* Change list bullets to empty circles */
 3    list-style-type: circle;
 4}
 5
 6ol {
 7    /* Number list items with lowercase letters (a, b, c, ...) */
 8    list-style-type: lower-alpha;
 9}
10
11ol.roman-list {
12    /* Number list items with uppercase roman numerals (I, II, III, ...) */
13    list-style-type: upper-roman;
14}
  • none: No se muestra ningún marcador.
  • disc (por defecto): Un pequeño círculo negro.
  • circle: Un pequeño círculo vacío (anillo).
  • square: Un pequeño cuadrado.
  • decimal: Una lista numerada como 1, 2, 3, ....
  • lower-alpha: Letras minúsculas como a, b, c, ....
  • upper-alpha: Letras mayúsculas como A, B, C, ....
  • lower-roman: Números romanos en minúsculas como i, ii, iii, ....
  • upper-roman: Números romanos en mayúsculas como I, II, III, ....
list-style-position 
1ul {
2    list-style-position: inside;
3}

La propiedad list-style-position especifica si el marcador (viñeta) se coloca fuera o dentro del elemento de la lista. La propiedad list-style-position puede tener los siguientes valores:.

  • outside: Los marcadores se colocan fuera del elemento de la lista, y el elemento comienza después del marcador. Este es el valor predeterminado.
  • inside: Los marcadores se colocan dentro del elemento de la lista y se muestran como parte del texto.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

La propiedad list-style-image se utiliza cuando se emplea una imagen como marcador de la lista. La imagen se especifica utilizando url(), y si no se puede cargar la imagen, se mostrará el marcador especificado por list-style-type.

Propiedad abreviada list-style 

1ul {
2    list-style: square inside url('bullet.png');
3}

La propiedad list-style es una propiedad abreviada que puede establecer list-style-type, list-style-position y list-style-image al mismo tiempo. El orden es flexible, pero generalmente se escribe como en este ejemplo. En este caso, se muestra una viñeta cuadrada dentro del elemento de la lista y se utiliza una imagen como marcador.

Resumen

  • list-style es una propiedad abreviada que te permite especificar la apariencia de la lista (tipo de marcador, posición, imagen personalizada) de una vez.
  • También es posible establecer list-style-type, list-style-position y list-style-image de forma individual.
  • Puedes personalizar los marcadores de la lista de manera flexible según el diseño y el diseño.

Contador de CSS (counter()) 

 1/* Reset the counter */
 2dl {
 3    counter-reset: item;
 4}
 5
 6/* Apply the counter to list items */
 7dl dt::before {
 8    counter-increment: item; /* Increment the counter */
 9    content: counter(item) ". "; /* Display the counter */
10}

Puedes usar contadores en CSS para numerar automáticamente los elementos de la lista o elementos específicos.

Crear e inicializar contadores 

1/* Create and initialize the counter */
2ol {
3  counter-reset: section; /* Set the counter name to 'section' */
4}

Puedes crear un contador y reiniciarlo con la propiedad counter-reset.

Incrementar contadores 

1/* Increment the counter and display it */
2li::before {
3  counter-increment: section; /* Increment the counter by 1 */
4  content: counter(section) ". "; /* Display the counter value */
5}

Puedes incrementar un contador con la propiedad counter-increment y mostrar el valor del contador con la función counter.

counters()

La función counters en CSS es muy útil para gestionar contadores personalizados, como numerar elementos de listas u ordenar párrafos. Esta función puede concatenar múltiples valores de contador con una cadena y mostrarlos en el contenido de CSS. Aquí explicaremos en detalle desde el uso básico de la función counters hasta ejemplos de aplicaciones prácticas.

Diferencias entre counter y counters

Ambas funciones, counter y counters, se utilizan para mostrar valores de contadores, pero tienen las siguientes diferencias.

  • counter: Recupera el valor de un único contador.
  • counters: Concatenar múltiples valores de contadores con un separador especificado y mostrarlos.

Por ejemplo, si deseas usar contadores con elementos de lista anidados, puedes utilizar la función counters para mostrarlos concatenando los contadores principal y secundario.

Sintaxis de la función counters 

counters(<counter-name>, <string>);

La función counters se utiliza con la siguiente sintaxis.

  • <counter-name>: Especifica el nombre del contador a utilizar.
  • <string>: Especifica la cadena a insertar entre cada contador (normalmente un separador como . o -).

Ejemplo de uso de la función counters

Ahora, veamos un ejemplo utilizando la función counters.

 1ol {
 2    list-style: none;
 3    counter-reset: list-counter;
 4}
 5
 6li {
 7    counter-increment: list-counter;
 8}
 9
10li::before {
11    content: counters(list-counter, ".") " ";
12}
  • En este ejemplo, los contadores principal y secundario se concatenan para una lista anidada de dos niveles.
    • Se está definiendo el contador list-counter.
    • La función counters se utiliza para concatenar y mostrar el contador de la lista principal y el contador de la lista secundaria.

Ejemplo avanzado usando contadores multinivel

Usando la función counters, puedes gestionar de manera flexible contadores multinivel como numeración personalizada o numeración de párrafos. Por ejemplo, es útil al crear documentos que incluyen capítulos y secciones.

 1article {
 2    counter-reset: chapter;
 3}
 4
 5h1.chapter {
 6    font-size: 1.2rem;
 7    counter-increment: chapter;
 8    counter-reset: section;
 9}
10
11h1.chapter::before {
12    content: counter(chapter) " ";
13}
14
15h2.section {
16    font-size: 1.1rem;
17    counter-increment: section;
18    counter-reset: sub-section;
19}
20
21h2.section::before {
22    content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26    font-size: 1rem;
27    counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}

En este código, los contadores para capítulos (h1), secciones (h2) y subsecciones (h3) se reinician, y se utiliza la función counters para concatenar cada nivel.

Resumen

La función counters es muy útil cuando deseas personalizar y mostrar varios contadores jerárquicamente. Al utilizar contadores CSS, puedes personalizar libremente la numeración de listas y encabezados, otorgando a las páginas web una estructura informativa avanzada.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades de CSS relacionadas con la decoración del modelo de cajaPropiedades de CSS relacionadas con tablas