Votre Navigateur ne supporte pas le JavaScript!
Home / Blog / Blog article

Notice: Undefined index: news_actus in /homepages/45/d283795163/htdocs/site-2013/tmp/templates_c/fc6d4015a0207ffcc00bd84890043ccaea513753.tpl_body.33.php on line 42

Notice: Trying to get property of non-object in /homepages/45/d283795163/htdocs/site-2013/tmp/templates_c/fc6d4015a0207ffcc00bd84890043ccaea513753.tpl_body.33.php on line 42

Styliser une liste en CSS avec :nth-child

 Sélectionner le premier élément d'une liste avec :first-child

Catégorie : Webdesign

Partagez cet article :

Email facebook twitter Google+

Découvrez comment styliser vos <li></li> grâce à l'aide des propriétées CSS tels que :nth-child, :nth-of-type ou bien encore :first-child et :last-child.

Sélectionner le premier élément d'une liste avec :first-child

  1.  li:first-child{color:#FFA60D;}

Sélectionner l'avant dernier élément d'une liste avec :nth-last-child(2)

 Sélectionner l'avant dernier élément d'une liste avec :nth-last-child(2)

  1.  li:nth-last-child{color:#FFA60D;}

Sélectionner le dernier élément d'une liste avec :last-child

 Sélectionner le dernier élément d'une liste avec :last-child

  1.  li:last-child{color:#FFA60D;}

Sélectionner un élément en particulier avec :nth-child()

Sélectionner un élément en particulier avec :nth-child(6)

  1.  li:nth-child(6){color:#FFA60D;}

Sélectionner des éléments à partir d'un certain nombre avec :nth-child(n+ )

Sélectionner des éléments à partir d'un certain nombre avec :nth-child(n+7)

  1.  li:nth-child(n+7){color:#FFA60D;}

Sélectionner des éléments jusqu'à un certain nombre avec :nth-child(-n+6)

Sélectionner des éléments jusqu'à un certain nombre avec :nth-child(-n+6)

  1.  li:nth-child(-n+6){color:#FFA60D;}

Sélectionner les éléments paires ou impaires

- Paires

  1.  li:nth-child(odd){color:#FFA60D;}

- Impaires

  1.  li:nth-child(even){color:#FFA60D;}

Pour une plus grande compatibilité avec les versions précédent IE9 (c'est étonnant de la part de Internet Explorer !), il existe un script nommé selectivizr qui permet d'émuler les pseudos classes et attributes pour les versions allant de IE6 à IE8.

selectivizr permet d'émuler les pseudos classes et attributes pour les versions allant de IE6 à IE8.

C'est le genre d'article à avoir dans ses bookmarks, n'hésitez pas à l'ajouter et à le partager sur les réseaux sociaux.

Catégories

Derniers articles

Je vous propose une petite compilation d'astuce et bout de code pour les...

> Lire la suite...

Dans cette article, je vous propose de découvrir comment intégrer un slider...

> Lire la suite...

A propos de l'auteur

Passionné d'informatique depuis les années 2000 et plus particulièrement par le monde du web, j'en ai fait mon métier (Chef de projets Web et auto-entrepreneur). J'ai décidé de créer ce blog afin de vous faire profiter d'astuces et de ressources autour de CMS Made Simple, HTML/CSS, JavaScript, Webdesign, ....