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.