Je zou je moeten verheugen op deze CSS3 eigenschap, gedaan met Javascript of PHP of elke andere programmeertaal om dynamisch elementen te kunnen aanspreken.
Maar ingewikkeld kan deze eigenschap wel zijn, dus hier enkele voorbeelden die je allicht op weg kunnen helpen:
CSS3
odd/even
Waarschijnlijk de meest gebruikte en verwachte mogelijkheid
/*elke 1ste - 3de - 5de - 7de etc ... */
li:nth-child(2n+1) { color: #333; }
li:nth-child(odd) { color: #333; }
/*elke 2de - 4de - 6de - 8de etc ... */
li:nth-child(2n) { color: #333; }
li:nth-child(even) { color: #333; }
Enkel de eerste
li:nth-child(0n+1) { color: #333; }
li:nth-child(1) { color: #333; }
Enkel de eerste 3 bijvoorbeeld
li:nth-child(-n+3) { color: #333; }
Nog meer verwarrende voorbeelden
/*de 4de - 8ste - 12de - 16de etc ... */
li:nth-child(4n) { color: #333; }
/*de 4de - 8ste - 12de - 16de etc ... */
li:nth-child(4n+4) { color: #333; }
/*de 1ste - 5de - 9de - 13de etc ... */
li:nth-child(4n+1) { color: #333; }
/*de 3de - 8ste - 13de - 18de etc ... */
li:nth-child(5n-2) { color: #333; }
Browser compatibility
De meeste moderne browsers ondersteunen deze eigenschap reeds, en om IE te laten gehoorzamen naar deze regel, gebruik Jquery, deze ondersteund de regel in zijn selectors lijst, en het zal werken in IE.