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.