:first-child, :nth-child() and :nth-of-type() spiegati

dabblet.css

/**
 * :first-child, :nth-child() and :nth-of-type() spiegati
 * per Jacopo
 * da http://www.w3.org/TR/CSS2/selector.html#first-child
 * "The :first-child pseudo-class matches an element that is the first child element of some other element."
 *                                                  ^ ONLY IF        
 */

.box {
	width: 100px;
	height: 100px;
	background-color: #cccccc;
	border: 10px solid #cc0000;
	margin: 10px;
}

 /* non funziona come credi */
 /* seleziona il primo figlio nel contesto di .box */
 /* quindi il FRATELLO di .box che è il primo figlio del contenitore */
 /* inoltre scritto così se il primo figlio del genitore di .box non ha la classe .box non viene selezionato */
.box:first-child {
	background-color: #00ff00;
	color: #ffcc00;
}

/* stesso comportamento con questo selettore */
/* che è un altro modo di scrivere la scorciatoia :first-child */
.box:nth-child(1){
	background-color: #00ff00;
	color: #ffcc00;
}

/* Questo invece funziona come credi */
/* E rende il primo box blu */
/* ma solo se il tag al quale è associata la classe è il primo figlio di quel tipo */
/* ma il supporto è quel che è */
.box:nth-of-type(1)
{
	background-color: #0000ff;
}

/* Nel tuo caso potresti volere questo */
/* anche se è brutto lavorare con CSS troppo legati alla struttura del markup*/
/* il supporto è solidissimo */
/* ho usato .header invece del tag per non includere l'HTML5 shiv */
.header + .box {
	border-color: #ff00ff;
}

dabblet.html

<div class="container">
	<h1 class="header">Titolo</h1>
	<div class="box">Content Box</div>
	<div class="box box2">Content Box 2</div>
	<div class="box box3">Content Box 3</div>
</div>
<p> Se anche l'h1 avesse la classe .box succederebbe questo, occhio.</h1>
<div class="container">
	<h1 class="header box">Titolo</h1>
	<div class="box">Content Box</div>
	<div class="box box2">Content Box 2</div>
	<div class="box box3">Content Box 3</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}