Corsi on-line

Numerazione automatica degli elementi di un elenco con CSS

L’evoluzione di CSS ha permesso di spostare il peso di alcune dinamiche delle pagine Web sulla parte presentazionale dei documenti alleggerendo quella funzionale dallo svolgimento di alcuni compiti; nel caso specifico di questo articolo, vedremo come sia possibile effettuare la numerazione automatica degli elementi presenti in un elenco utilizzando unicamente alcune regole di stile e un po’ di markup HTML; a tale proposito partiremo proprio dal CSS che potremo organizzare nel modo seguente:

<style type="text/css">
h1 { counter-reset: section; }
h2 { counter-reset: subsection; }
h2::before {
    content: counter(section) ". ";
    counter-increment: section;
}
p::before {
    content: counter(section) "." counter(subsection) " ";
    counter-increment: subsection;
}
</style>

La proprietà counter-reset ha il compito apposito di numerare sezioni e sotto-sezioni utilizzando una modalità di ordinamento sul modello di “Sezione 1”, “1.1”, “1.2” e così via; il selettore before inserirà invece del contenuto esistente prima di ogni elemento “p”; per cui, impostando un codice HTML come il seguente:

<h1>Programmazione orientata agli oggetti</h1>
<h2>Caratteristiche</h2>
<p>Incapsulamento</p>
<p>Ereditarietà</p>
<p>Polimorfismo</p>
<h2>Composizione delle classi</h2>
<p>Attributi</p>
<p>Oggetti</p>
<p>Costruttore</p>
<p>Distruttore</p>

Dovremmo ottenere un output come quello mostrato di seguito:

Lista

La stessa procedura potrebbe risultare particolarmente utile se utilizzata per l’ordinamento di elementi prelevati da una sorgente d’informazioni esterna come per esempio una base di dati.

Via CSSreset

Post correlati
I più letti del mese
Tematiche