:nth-child

Aller un petit peu de CSS3 pour se mettre en forme. Je suis sûre que vous vous êtes tous deja confronté au problème suivant : Comment attribuer un style différent à tous les li d’une liste (dans le cas d’un menu sous forme d’image par exemple…). Jusqu’à maintenant la seule solution que nous avions était d’attribuer une classe différente à chaque li.

Avec CSS3, c’est terminé, il est en effet possible d’attribuer au énième élément d’un liste un style spécifique via la syntaxe a:nth-child(). Le fonctionnement est très simple, si j’écris  .liste a:nth-child(2), l’attribue un style au deuxième élément contenu dans l’élément qui porte la class « liste ».

Plus complexe il est possible de « styler » des éléments de manière récurrente (utile dans le cas de la mise en forme d’un tableau) : nt-child(6n+1)  stylera le premier élément suivit des éléments positionné tous les 6 éléments…

Inutile de vous préciser que cela ne fonctionne que sur les navigateurs dit « modernes ».

Bon le plus simple, c’est que vous alliez voir comment ça se passe : http://ozmm.org/posts/nth_child.html