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.