CSS: un'interessante applicazione del selettore :nth-child

Short link

I selettori CSS3 possono avere delle interessanti applicazioni pratiche su comuni problemi di layout.

Partiamo da questa marcatura:


<div id="container">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>	

Con questi stili di base:


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

.box {
	background: silver;
	float: left;
	width: 14%;
	height: 100px;
	margin: 1%;
}

Vogliamo che i box vengano divisi in righe da tre. Quindi applichiamo il clearing con questa formula:


#container .box:nth-child(3n+1) {
	clear: left;
}

Ora il clearing verrà applicato su ogni box che soddisfa la formula, ossia ogni tre box più uno.

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.