23 Jun, 2010

CSS3: werken met :nth-child() pseudo class

Categoriën: CSS3 |solution

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.

Gerelateerde Snippets

Geen reakties op "CSS3: werken met :nth-child() pseudo class"

Reaktie formulier


Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.