Propriedade CSS counter-increment
A propriedade CSS counter-increment aumenta ou diminui os valores dos contadores. Veja exemplos com os valores da propriedade.
A propriedade counter-increment define quanto os valores dos contadores devem aumentar ou diminuir. Esta propriedade é usada com as propriedades content e counter-reset.
A propriedade counter-increment é especificada por dois valores: none e números de id. "None" é o valor padrão desta propriedade. Ela permite usar valores negativos no caso do valor "id number". O incremento padrão é 1. Se o id do contador não for inicializado por counter-reset, o valor padrão é 0. O valor do contador pode ser definido para um número arbitrário com a propriedade counter-reset.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Não. |
| Animável | Discreto. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.counterIncrement = "subsection"; |
Sintaxe
Sintaxe da Propriedade CSS counter-increment
counter-increment: none | id number | initial | inherit;Exemplo da propriedade counter-increment:
Exemplo da Propriedade CSS counter-increment
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: "Section " counter(my-counter) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Resultado
Exemplo da propriedade counter-increment com seções e subseções numeradas:
Propriedade CSS counter-increment com valor de subseção
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* Set "section" to 0 */
counter-reset: section;
}
h2 {
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h2::before {
counter-increment: section;
content: "Book " counter(section) ": ";
}
h3::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h2>HTML</h2>
<h3>HTML Basics</h3>
<h3>HTML Templates</h3>
<h3>HTML References</h3>
<h3>HTML Tags</h3>
<h2>CSS</h2>
<h3>CSS Basics</h3>
<h3>CSS References</h3>
<h3>CSS Advanced</h3>
<h3>CSS Guides</h3>
<h3>CSS Selectors</h3>
<h3>CSS Properties</h3>
</body>
</html>Exemplo da propriedade counter-increment com algarismos romanos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: counter(my-counter, upper-roman) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| none | Os contadores não são incrementados. Este é o valor padrão. |
| id number | Id define qual contador incrementar. Number define quanto o contador será incrementado. |
| initial | Define a propriedade para o seu valor padrão. |
| inherit | Herda a propriedade do seu elemento pai. |