CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

counter-reset: nome-contatore valore-iniziale?;

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

CODE: CSSpreleva codice
  1. .step-list {
  2.   counter-reset: passo 1;
  3.   padding-left: 0;
  4. }
  5.  
  6. .step-list li {
  7.   list-style: none;
  8.   counter-increment: passo;
  9.   position: relative;
  10.   padding-left: 40px;
  11.   margin-bottom: 10px;
  12.   font-size: 18px;
  13. }
  14.  
  15. .step-list li::before {
  16.   content: "Passo " counter(passo) ": ";
  17.   position: absolute;
  18.   left: 0;
  19.   color: #4078f2;
  20.   font-weight: bold;
  21. }

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies