Vandaag gaan we eens kijken naar een nieuw soort functie binnen CSS3: de zogenaamde :nth-child() pseudo-class. Met deze pseudo class is het mogelijk om bepaalde elementen niet aan te roepen door alleen hun naam (bijvoorbeeld li, a, img enz.) maar hierin ook een onderscheid te maken in het aantal. Zo kun je bijvoorbeeld de tekst in alle oneven 'li'-elementen van een lijst een bepaalde kleur geven, terwijl de oneven 'li'-elementen een andere kleur krijgen.

Hoe werkt het?

Laten we maar gelijk naar een aantal voorbeelden kijken, dan wordt het al snel duidelijk. In al deze voorbeelden zullen we het li-element nemen. Let op: 'n' staat hier voor het aantal opeenvolgende elementen, 10n is dus het 10e, 20e, 30e enz. element.

Even/Oneven

 /*De 1e, 3e, 5e, 7e, 9e enz. */
li:nth-child(2n+1) { color: #00f; }
li:nth-child(odd) { color: #00f; }
 /*De 2e, 4e, 6e, 8e, 10e enz. */
li:nth-child(2n) { color: #00f; }
li:nth-child(even) { color: #00f; }

Een bepaald aantal

 /*Alleen de eerste */
li:nth-child(1) { color: #00f; }
li:nth-child(0n+1) { color: #00f; }
 /*Alleen de tweede */
li:nth-child(2) { color: #00f; }
li:nth-child(0n+2) { color: #00f; }

Meer voorbeelden

/*De 5e, 10e, 15e, 20e enz. */
li:nth-child(5n) { color: #00f; }
/*De 3e, 8e, 13e, 18e enz. */
li:nth-child(5n-2) { color: #00f; } 
/*De 1e, 5e, 9e, 13e enz. */
li:nth-child(4n+1) { color: #00f; }

/*De eerste 3*/
li:nth-child(-n+3)
/*De laatste 3*/
li:nth-last-child(3)