«
»

Aujourd’hui, je voudrais parler de la propriété CSS :nth-child. C’est une pseudo-classe introduite dans CSS 3, et qui permet de sélectionner des noeuds en fonction du numéro de leur position en tant qu’enfant. C’est très pratique pour colorier les lignes d’un tableau par exemple.

Fonctionnalités


Cette pseudo-classe permet de sélectionner des éléments à partir du kème fils tous les p fils : selector:nth-child(pn+k). Les enfants dont la position est égale à une valeur définie par cette suite géométrique est sélectionné.

Exemple

Sélectionner une valeur pour la propriété nth-child :

  1. Karmelitt Tripel
  2. Kastel Brune
  3. Delirium Nocturnum
  4. Gulden Draak
  5. Chimay 500
  6. Malheur
  7. St-Bernardus 8
  8. Rochefort 10


Rien ne se met à jour ? Vérifiez que votre navigateur est compatible.

Explication

L’idée est de partir du noeud k, puis itérer de faire prendre à n les valeurs entre 0 et le nombre total d’enfants.

  • n : tous les enfants du premier au nème
  • 2n : tous les deux enfants à partir du 0ème, c’est à dire à partir du 2ème : 2, 4, 6… Ce sont les nombres pairs.
  • 2n+1 : tous les deux enfants à partir du 1er : 1, 3, 5… Ce sont les nombres impairs
  • n+2 : tous les enfants à partir du 2ème, ou encore tous sauf le premier
  • 3n+2 : tous les trois enfants à partir du 2ème : 2, 5, 8…
  • -n+2 : en descendant, tous les enfants à partir du 2ème : 2, 1 et c’est tout. Ce sont les deux premiers enfants.

Compatibilité


Hélas, comme toutes les propriétés CSS3 existantes, cette propriété n’est compatible qu’à partir de IE9+ (et bien sûr Firefox 3+, Chrome, Safari 4+… mais ça va sans dire !).

Netographie

L’abus d’alcool est dangereux pour la santé. A consommer avec modération.

This entry was posted by Cyril on 27 février 2012 at 08:04 under web. Tagged , . Both comments and pings are currently closed.