CSS: liste con contatori, pseudo-elementi e generated content

16 marzo 2015

Assegnare uno stile ai numeratori delle liste ordinate non è un’operazione immediata, in quanto lo standerd CSS non offre al momento un selettore che permetta di isolare i numeri che contrassegnano gli elementi delle liste (markers).

Eppure come abbiamo già visto in un altro articolo è possibile ridisegnare i numeratori grazie ad una funzonalità presente nella specifica di CSS 2.1: i contatori.

I contatori CSS

Si tratta di variabili i cui valori possono essere incrementati grazie a dichiarazioni CSS che permettono di tenere in memoria il numero di volte in cui il contatore stesso è utilizzato all’interno del DOM. Per gestire i contatori, la specifica fornisce le proprietà:

  • counter-reset, dichiara il nome del contatore;
  • counter-increment, incrementa il valore di una unità.

Le due proprietà possono essere assegnate a qualunque elemento del DOM, e quindi i valori dei contatori possono essere modificati arbitrariamente.

Il valore del contatore viene mandato a video grazie alle funzioni counter() e counters() della proprietà content.

I contatori e le liste ordinate

Prendiamo come esempio una semplice lista ordinata:

<ol class="number">
	<li>Lorem ipsum dolor sit amet, ... </li>
	<li>Lorem ipsum dolor sit amet, ... </li>
</ol>

Assegniamo, quindi, all’elemento ol il seguente stile:

ol.number {
	width: 32em;
	margin: 0;
	padding: 0;
	margin-left: 4em;
	list-style-type: none;
	counter-reset: simple-counter;
}

Con la proprietà list-style-type viene annullato lo stile della lista, mentre con counter-reset viene impostato il contatore simple-counter. Il valore predefinito del contatore è 0, ma counter-reset permette anche di assegnare un valore iniziale diverso:

ol.number {
	...
	list-style-type: none;
	counter-reset: simple-counter 4;
}

In questo modo, il primo elemento della lista sarà contrassegnato dal numero 5. Una volta impostato il contatore, bisogna mandare a video i valori che questo assume man mano che viene aggiornato.
Per raggiungere lo scopo, si ricorre alla proprietà content dello pseudo-elemento ::before, come nella dichiarazione che segue:

ol.number li::before {
	position: absolute;
	top: 0;
	left: -0.8em;
	font-size: 2.8em;
	line-height: 1em;
	content: counter(simple-counter);
	counter-increment: simple-counter;
}

La funzione counter() restituisce il valore del contatore, che quindi può essere mandato a video con la proprietà content.

Il codice CSS completo e l’esempio dal vivo.

Le funzioni counter() e counters()

Grazie alla proprietà content, assegnata agli pseudo-elementi ::before e ::after, è possibile generare un contenuto all’interno di un elemento del DOM. Tra i possibili valori della proprietà content, le funzioni counter() e counters() forniscono i valori correnti dei contatori.

Counter

La funzione counter() accetta uno o due argomenti:

 
X
Se vuoi aggiornamenti su CSS: liste con contatori, pseudo-elementi e generated content

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy