Magazine Graphisme

La propriété CSS :nth-child pour un contrôle absolu de vos listes

Publié le 22 juin 2011 par Louis-Philippe Dea

nth child css

Afin de styliser en CSS une liste d’éléments, que ce soit pour la navigation de votre site web ou pour une liste dans vos contenus, vous pouvez utiliser un « ID » différent pour chacun de vos items.

Cependant, cela aura comme inconvénient de vous créer plusieurs lignes de codes qui auraient pu être évitées à l’aide de différentes propriétés telles que :nth-child, :nth-of-type, :first-child et :last-child.

Ces propriétés sont également très utiles lorsque vous avez une liste avec énormément d’éléments.

Voici un article illustrant à merveille l’utilisation de chacune de ces propriétés CSS dans différents contextes afin d’avoir un contrôle absolu sur vos listes HTML.

L’article suivant a été écrit par Chris Coyier du site web CSS-Tricks.com

Sélectionner seulement le 5e élément

listes css propriétés

li:nth-child(5) {
    color: green;
}

Si vous devez sélectionner seulement le 1er élément de la liste, vous pouvez utiliser ceci li:first-child ou tout simplement li:nth-child(1).

Tout sélectionner sauf les cinq premiers

listes css propriétés

li:nth-child(n+6) {
    color: green;
}

Sélectionner seulement les cinq premiers

listes css propriétés 3

li:nth-child(-n+5) {
    color: green;
}

Selectionner à chaque quatre éléments, en comment par le premier

listes css propriétés 4

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;
}

Sélectionner seulement les positions paires ou les impaires

listes css propriétés 5

li:nth-child(odd) {
    color: green;
}

listes css propriétés 6

li:nth-child(even) {
    color: green;
}

Sélectionner le dernier élément de la liste

listes css propriétés 7

li:last-child {
    color: green;
}

Sélectionner l’avant-dernier élément de la liste

listes css propriétés 8

li:nth-last-child(2) {
    color: green;
}

Compatibilité des fureteurs

La propriété :first-child est supporté par Internet Explorer depuis la version 7, mais ce n’est que depuis la version 9 de IE que le reste des propriétés est devenu compatible. Mise à part Internet Explorer, ces propriétés sont supportées par les fureteurs populaires. Si vous voulez quand même utiliser ces propriétés avec IE, vous pouvez utiliser le service Selectivizr.

Aussi, si vous êtes intéressé par la compatibilité des navigateurs par rapport à diverses propriétés, vous pouvez également visiter le site web When can I use….

Vous avez apprécié l'article?


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

  • Template Css

    Template

    20 modèles | CSS | XHTML | HTML | PSD | 211MB Téécharger http://hotfile.com/dl/90246088/506c7cc/Css_template_CD1.part1.rar.html... Lire la suite

    Par  Wklog
    HIGH TECH, INFORMATIQUE, INTERNET
  • 20 Beautiful High Quality CSS/XHTML Website Templates

    Beautiful High Quality CSS/XHTML Website Templates

    Beautiful High Quality CSS/XHTML Website Templates - Thanks to all web designers and developers from all over the world who freely distributed their high-qualit... Lire la suite

    Par  Wklog
    HIGH TECH, INFORMATIQUE, INTERNET
  • 10 CSS Tools & Generators For Developer & Designer

    Tools Generators Developer Designer

    CSS Tools Generators For Developer amp ; Designer - Writing CSS codes from the scratch is really a tiresome and time-consuming task that can freak out a CSS... Lire la suite

    Par  Wklog
    HIGH TECH, INFORMATIQUE, INTERNET
  • Premiers pas en CSS et HTML

    Premiers HTML

    Choisissez la simplicité et l'élégance des CSS pour créer vos sites web avec style et panache ! Changez sans peine la charte graphique de votre site ; Apprenez ... Lire la suite

    Par  Wklog
    HIGH TECH, INFORMATIQUE, INTERNET
  • CSS et emailing

    emailing

    Les newsletters sont un excellent moyen d'augmenter les ventes et de fidéliser la clientèle. Mais il est souvent difficile de les concevoir pour qu'elles... Lire la suite

    Par  Seomix
    HIGH TECH, INFORMATIQUE, INTERNET, PROGRAMMATION
  • Performance web: compression des frontaux JS/CSS

    Performance web: compression frontaux JS/CSS

    Alors concrètement, pour améliorer les performance de vos sites, il n’existe pas de formule magique; beaucoup d’huile de coudes, quelques tuyaux venant des... Lire la suite

    Par  Pixelboy
    HIGH TECH, INTERNET
  • Google Reader Css Fix

    Google Reader

    Avec l'arrivée de la nouvelle version de Google Reader, pas mal de personnes grognent et ils ont raison. En effet, le fait de forcer les gens à utiliser par... Lire la suite

    Par  Dictege
    HIGH TECH, INFORMATIQUE, INTERNET

A propos de l’auteur


Louis-Philippe Dea 61677 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog