CSS: usare il selettore nth-child() per gestire i layout colonnari

Short link

I nuovi selettori CSS3 sono molto potenti. In particolare il selettore :nth-child() ci permette di selezionare gli elementi in base a formule precise che fanno riferimento alla loro posizione nella struttura del documento. Un esempio interessante sono i layout colonnari.

Supponiamo di avere sei box su una stessa riga allineati tramite il floating. Vogliamo creare due righe con tre float su ciascuna. Ecco come faremo:


#container {
	margin: 2em auto;
	overflow: hidden;
	max-width: 900px;
	padding: 0 1em;
}

.box {
	background: silver;
	float: left;
	width: 14%;
	height: 100px;
	margin: 1%;
}
#container .box:nth-child(3n+1) {
	clear: left;
}

3n + 1 seleziona il quarto box ed applica il clear su questo box. Ma questa formula significa anche che ad ogni multiplo di tre più il seguente verrà applicata la stessa regola, quindi avremo più righe e sempre tre elementi per riga.