Usando os contadores de CSS
contadores CSS são como "variáveis". Os valores das variáveis pode ser incrementado por regras CSS (que irá rastrear quantas vezes eles são utilizados).
Para trabalhar com contadores CSS, vamos utilizar as seguintes propriedades:
-
counter-reset- Cria ou repõe um contador -
counter-increment- Aumenta um valor do contador -
content- Insere o conteúdo gerado -
counter()oucounters()função - Adiciona o valor de um contador para 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 do corpo), em seguida, incrementa o valor do contador para cada <h2> elemento e acrescenta "Section < value of the counter >:" ao início de cada <h2> elemento:
Exemplo
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Tente você mesmo " Contadores de nidificação
O exemplo a seguir cria um contador para a página (seção) e um contador para cada <h1> elemento (subseção). A "section" contador será contado para cada <h1> elemento com "Section < value of the section counter >." , Eo "subsection" contador será contado para cada <h2> elemento com "< value of the section counter >.< value of the subsection counter >" :
Exemplo
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) " ";
} Tente você mesmo " Um contador também pode ser útil para fazer listas descritas porque uma nova instância de um contador é automaticamente criado em elementos filho. Aqui usamos os counters() funcionar para inserir uma corda entre diferentes níveis de contadores aninhados:
Exemplo
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} Tente você mesmo " Propriedades do contador CSS
| Propriedade | Descrição |
|---|---|
| content | Usado com o :: before e :: after pseudo-elementos, para inserir o conteúdo gerado |
| counter-increment | Incrementos de um ou mais valores do contador |
| counter-reset | Cria ou redefine um ou mais contadores |