Atributo counter-set do CSS
- Página anterior counter-reset
- Próxima página @counter-style
Definição e uso
counter-set
A propriedade é usada para criar e definir um contador CSS para um valor específico.
counter-set
As propriedades são geralmente usadas juntamente com as propriedades counter-increment e content.
Exemplo
Exemplo 1
Criar um contador ("my-counter"), defini-lo como 5 e incrementá-lo 1 vez a cada aparição do seletor <h2>:
body { /* Definir "my-counter" como 5 */ counter-set: my-counter 5; } h2::before { /* Adiciona 1 ao "my-counter" */ counter-increment: my-counter; content: "Section " counter(my-counter) ". "; }
Exemplo 2
Criar um contador ("my-counter"), defini-lo como 5 e decrementá-lo 1 vez a cada aparição do seletor <h2>:
body { /* Definir "my-counter" como 5 */ counter-set: my-counter 5; } h2::before { /* Diminuir "my-counter" em 1 */ counter-increment: my-counter -1; content: "Section " counter(my-counter) ". "; }
Exemplo 3
Usar formatos como "Section 10:"、"10.1"、"10.2" para numerar seções e subseções:
body { /* Definir "section" como 9 */ counter-set: section 9; } h1 { /* Define "subsection" como 0 */ counter-set: subsection 0; } h1::before { /* Adiciona 1 ao "section" */ counter-increment: section; content: "Seção " counter(section) ": "; } h2::before { /* Adiciona 1 ao "subsection" */ counter-increment: subsection; content: counter(section) "." counter(subsection) " "; }
Exemplo 4
Crie um contador, configure-o como 9 e aumente 1 em cada ocorrência do seletor <h2> (usando números romanos):
body { /* Define "my-counter" como 9 */ counter-set: my-counter 9; } h2::before { /* Adiciona 1 ao "my-counter" */ counter-increment: my-counter; content: counter(my-counter, upper-roman) ". "; }
Sintaxe do CSS
counter-set: none|counter-name number|initial|inherit;
Valor do atributo
Valor | Descrição |
---|---|
none | Valor padrão. Não configurar o contador. |
counter-name number |
O nome do contador a ser configurado e seu valor. A cada ocorrência do seletor, o contador será configurado para esse valor. O valor padrão é 0. |
initial | Defina essa propriedade como seu valor padrão. Veja initial. |
inherit | Herda essa propriedade do elemento pai. Veja inherit. |
Valor padrão: | none |
---|---|
Herança: | Não |
Produção de animação: | Não suportado. Veja:Propriedades relacionadas a animação. |
Versão: | CSS2 |
Sintaxe do JavaScript: | object.style.counterSet="4" |
Suporte do navegador
Os números na tabela indicam a primeira versão do navegador que suporta essa propriedade completamente.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
85 | 85 | 68 | 17.2 | 71 |
Páginas relacionadas
Referência:Elemento pseudo ::before
Referência:Elemento pseudo ::after
Referência:Atributo content do CSS
Referência:Atributo counter-increment do CSS
Referência:Função counter() do CSS
- Página anterior counter-reset
- Próxima página @counter-style