Contadores CSS são "variáveis" mantidas por CSS cujos valores podem ser incrementados por regras CSS (para rastrear quantas vezes são usados). Os contadores permitem ajustar a aparência do conteúdo com base em seu posicionamento no documento.
Os contadores CSS são como "variáveis". Os valores das variáveis podem ser incrementados por regras CSS (que rastrearão quantas vezes elas são usadas).
Para trabalhar com contadores CSS usaremos as seguintes propriedades:
counter-reset- Cria ou redefine um contador
counter-increment- Incrementa um valor de contador
content- Insere conteúdo gerado
counter() or counters() function- Adiciona o valor de um contador a um elemento
Para usar um contador CSS, ele deve primeiro ser criado com counter-reset.
O exemplo a seguir cria um contador para a página (no seletor de corpo), em seguida, incrementa o valor do contador para cada elemento <h2> e adiciona "Seção valor do contador:" ao início de cada elemento <h2>:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<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>
</body>
</html>
O exemplo a seguir cria um contador para a página (seção) e um contador para cada elemento <h1> (subseção). O contador "seção" será contado para cada elemento <h1> com "Seção valor do contador de seção.", e o contador "subseção" será contado para cada elemento <h2> com "<valor do contador de seção.valor do contador de subseção":
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) " ";
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>
Um contador também pode ser útil para fazer listas delineadas porque um novo a instância de um contador é criada automaticamente em elementos filhos. Aqui usamos o Função counters() para inserir uma string entre diferentes níveis de aninhados contadores:
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<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>
</body>
</html>
Usado com os pseudoelementos ::before e ::after, para inserir conteúdo gerado
Incrementa um ou mais valores de contador
Cria ou redefine um ou mais contadores
Retorna o valor atual do contador nomeado