CSS counter-increment
La proprietà CSS3 counter-increment consente di incrementare un contatore personalizzato
La proprietà counter-increment viene usata per aumentare il valore di un contatore definito tramite counter-reset. In combinazione con gli pseudoelementi e la proprietà content, permette di creare strutture dinamiche numerate in modo automatico, come elenchi, titoli o step.
Sintassi
Significato dei valori principali:
-
nome-contatore: il nome del contatore definito dall'utente (deve essere coerente con quello usato in
counter-reset). -
numero: (facoltativo) di quanto deve essere incrementato il contatore. Il valore predefinito è
1. Può essere negativo per decrementare. -
none: valore di default; non incrementa alcun contatore.
Esempio proprietà: counter-increment
Codice Esempio: counter-increment
.counter-list {
counter-reset: sezione;
padding-left: 0;
}.counter-list li {
list-style: none;
counter-increment: sezione;
position: relative;
padding-left: 35px;
margin-bottom: 10px;
font-size: 18px;
}.counter-list li::before {
content: counter(sezione) ". ";
position: absolute;
left: 0;
color: #50a14f;
font-weight: bold;
}
Contenuto Esempio: counter-increment
Esempio di utilizzo della proprietà counter-increment
In questo esempio, viene creata una lista personalizzata numerata automaticamente usando counter-increment:
- Preparare gli ingredienti
- Scaldare il forno
- Infornare per 30 minuti
CSS e HTML per l'esempio:
<style>
.counter-list {
counter-reset: sezione;
padding-left: 0;
}
.counter-list li {
list-style: none;
counter-increment: sezione;
position: relative;
padding-left: 35px;
margin-bottom: 10px;
font-size: 18px;
}
.counter-list li::before {
content: counter(sezione) ". ";
position: absolute;
left: 0;
color: #50a14f;
font-weight: bold;
}
</style>
<ul class="counter-list">
<li>Preparare gli ingredienti</li>
<li>Scaldare il forno</li>
<li>Infornare per 30 minuti</li>
</ul>
Nota:
gli pseudoelementi si scrivono con due due punti (::) per distinguere meglio da pseudoclassi (:), anche se alcuni browser supportano ancora la notazione con uno solo (:before, :after...).
| Pseudoelemento | Descrizione |
|---|---|
::before |
Inserisce contenuto prima del contenuto effettivo di un elemento. |
::after |
Inserisce contenuto dopo il contenuto effettivo di un elemento. |
::first-letter |
Seleziona la prima lettera di un blocco di testo. |
::first-line |
Seleziona la prima riga visibile di un blocco di testo. |
::selection |
Applica uno stile al testo selezionato dall’utente. |
::placeholder |
Seleziona il testo segnaposto in un campo input o textarea. |
::marker |
Seleziona il simbolo di un elemento lista (es. il pallino o numero). |
::cue |
Stilizza le didascalie ('<track>') nei contenuti video. |
::backdrop |
Stilizza il fondo modale dietro elementi a tutto schermo come i <dialog>. |
::file-selector-button |
Stilizza il pulsante di selezione file in un input type="file". |
::part() |
Seleziona una parte interna di un Web Component esposta con l’attributo part. |
::slotted() |
Stilizza gli elementi inseriti in uno slot all’interno di un Web Component. |
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
