49-contadores en CSS

Los contadores en CSS son variables cuyo valor puede ser incrementado por las reglas del CSS

Los contadores permiten ajustar el contenido segun la ubicacion en el documento.

Numeracion automatica

Para trabajar con contadores en CSS usamos las seguientes propriedades:

• counter-reset- Crea o reinicia un contador
• counter-increment- Incrementa un valor de contador
• content- Insertos generados contenido
• counter()o counters()función - Agrega el valor de un contador a un elemento

Para usar un contador CSS, primero debe crearse con counter-reset.

Para que se entienda mejor vease el ejemplo seguiente, onde se crea un contador para la pagina.

Luego se incrementa el valor del contador para cada h2 y agrega Seccion al inicio de cada elemento h2

...

Ejemplo del codigo

 body {
     counter-reset: section;
   }
   
   h2::before {
     counter-increment: section;
     content: "Section " counter(section) ": ";
   }
    

Como se Ve?

        
Uso de contadores CSS

Section 1 :HTML Tutorial
Section 2 :CSS Tutorial
Section 3 :JavaScript Tutorial
Section 4 :Python Tutorial
Section 5 :SQL Tutorial
    

Codigo completo del ejemplo anterior

 //estilos
 <style>
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>

//Codigo
<h1>Using CSS Counters</h1>

<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>
    

---

Contadores de anidamiento

vamos ver un ejemplo onde se crea un contador para la pagina y otro para cada elemento h1

El contador de subseccion se contara por cada elemento h2

Ejemplo del CSS

body {
    counter-reset: section;
  }
  
  h1 {
    counter-reset: subsection;
  }
  
  h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
  }
  
  h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
  }
    

Como se Ve?

        
Section 1.HTML/CSS Tutorials
1.1 HTML
1.2 CSS
1.3 Bootstrap
1.4 Frioyelectronica

Section 2.Scripting Tutorials
2.1 JavaScript
2.2 jQuery
2.3 React

Section 3. Programming Tutorials
3.1 Python
3.2 Java
3.3 C++
    

Codigo completo del ejemplo anterior

//Los estilos
<style>
body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
//El codigo
<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>

<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>

<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>
    

---

Listas esbozadas

Un contador CSS sirve para hacer listas esbozadas

Una instancia del contador se crea automaticamente en elementos secundarios

Nel ejemplo seguiente se usa la function counters para insertar una cadena en los diferentes niveles de contadores anidados

Ejemplo del codigo completo

//Los estilos
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>

//El codigo
<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>
    

Como se Ve?

Ir al indice