Propriedade de contra-incremento CSS
Exemplo
Crie um contador ("my-sec-counter") e aumente-o em um para cada ocorrência do seletor <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A counter-increment
propriedade aumenta ou diminui o valor de um ou mais contadores CSS.
A counter-increment
propriedade geralmente é usada em conjunto com a
propriedade counter-reset e a
propriedade content .
Valor padrão: | Nenhum |
---|---|
Herdado: | não |
Animavel: | não. Leia sobre animáveis |
Versão: | CSS2 |
Sintaxe JavaScript: | object .style.counterIncrement = "subseção"; |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Sintaxe CSS
counter-increment: none|id|initial|inherit;
Valores de propriedade
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Crie um contador ("my-sec-counter") e diminua-o em um para cada ocorrência do seletor <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Exemplo
Numeração de seções e subseções com "Seção 1:", "1.1", "1.2", etc.:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Exemplo
Crie um contador e aumente-o em um (usando algarismos romanos) para cada ocorrência do seletor <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
Páginas relacionadas
Referência CSS: ::antes do pseudo elemento
Referência CSS: ::after pseudo elemento
Referência CSS: propriedade de conteúdo
Referência CSS: propriedade counter-reset
Funções CSS: função counter()
Referência HTML DOM: propriedade counterIncrement