CSS counter-reset
La proprietà CSS3 counter-reset inizializza un contatore personalizzato
La proprietà counter-reset definisce e azzera un contatore che può poi essere incrementato con counter-increment. È spesso usata in combinazione con ::before e content per generare contenuti numerici dinamici in elenchi, passaggi sequenziali o titolazioni automatiche.
Sintassi
Significato dei valori principali:
-
nome-contatore: il nome logico del contatore da creare. Deve essere lo stesso utilizzato con
counter-increment. -
valore-iniziale: (facoltativo) valore da cui parte il contatore. Il valore predefinito è
0. Può essere anche negativo. -
none: nessun contatore viene inizializzato.
Esempio proprietà: counter-reset
Codice Esempio: counter-reset
.step-list {
counter-reset: passo 1;
padding-left: 0;
}.step-list li {
list-style: none;
counter-increment: passo;
position: relative;
padding-left: 40px;
margin-bottom: 10px;
font-size: 18px;
}.step-list li::before {
content: "Passo " counter(passo) ": ";
position: absolute;
left: 0;
color: #4078f2;
font-weight: bold;
}
Contenuto Esempio: counter-reset
Esempio di utilizzo della proprietà counter-reset
In questo esempio, counter-reset inizializza un contatore chiamato passo che viene poi incrementato in ogni elemento li:
- Accendi il computer
- Apri il browser
- Visita il sito desiderato
CSS e HTML per l'esempio:
<style>
.step-list {
counter-reset: passo 1;
padding-left: 0;
}
.step-list li {
list-style: none;
counter-increment: passo;
position: relative;
padding-left: 90px;
margin-bottom: 10px;
font-size: 18px;
}
.step-list li::before {
content: "Passo " counter(passo) ": ";
position: absolute;
left: 0;
color: #4078f2;
font-weight: bold;
}
</style>
<ul class="step-list">
<li>Accendi il computer</li>
<li>Apri il browser</li>
<li>Visita il sito desiderato</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.214
