/ Code Css :nth-child | Résultat du code Css :nth-child | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code du sélecteur CSS :nth-child.

<style type="text/css">
ul.nthchild (2){
 border:1px solid red; 
}
</style>:nth-child(2)
<ul class="nthchild">
  <li> 1<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
  <li> 2<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
  <li> 3<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
</ul>
<style type="text/css">
ul.nthchilda {
 border:1px solid red; 
}
</style>:nth-child(1n+2)
<ul class="nthchilda">
  <li> 1<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
  <li> 2<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
  <li> 3<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
</ul>
<style type="text/css">
ul.nthchildb {
 border:1px solid red; 
}
</style>:nth-child(-1n+2)
<ul class="nthchildb">
  <li> 1<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
  <li> 2<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
  <li> 3<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
</ul>
<style type="text/css">
ul.nthchildc {
  color : red; 
}
ul.nthchildc {
 border:1px solid red; 
}
</style>:nth-child(odd) et identifiant :nth-child(even) 
<ul class="nthchildc">
  <li> 1<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
  <li> 2<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
  <li> 3<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span>.</li>
</ul>
<style type="text/css">
ul.nthchildd {
 border:1px solid red; 
}
</style>:nth-child(3n+2)
<ul class="nthchildd">
  <li> 1<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 2<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 3<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 4<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 5<sup>ème</sup>  <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span>
    <ul>
      <li> 1<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
      <li> 2<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
      <li> 3<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
      <li> 4<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
      <li> 5<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
      <li> 6<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
    </ul>
  </li>
  <li> 6<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 7<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 8<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
</ul>
<style type="text/css">
ul.nthchilde span{
 border:1px solid red; 
}
</style>span:nth-child(3n+2)
<ul class="nthchilde">
  <li> 1<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 2<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 3<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 4<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 5<sup>ème</sup>  <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span>
    <ul>
      <li> 1<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
      <li> 2<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
      <li> 3<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
      <li> 4<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
      <li> 5<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
      <li> 6<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
    </ul>
  </li>
  <li> 6<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 7<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
  <li> 8<sup>ème</sup> <span>fils</span>  <span>en rouge</span> <span>si sélectionné</span> <span>.</span></li>
</ul>

Voir de code :nth-child dans :

Interprétation du code du sélecteur :nth-child CSS par votre navigateur.

:nth-child(2) :nth-child(1n+2) :nth-child(-1n+2) :nth-child(odd) et identifiant :nth-child(even) :nth-child(3n+2) span:nth-child(3n+2)

Interprétation normale du code du sélecteur CSS :nth-child (copie d'écran).

copie d'écran de l'affichage du sélecteur CSS :nth-child


Aller en haut de la page

Vos paramètres de cookies

Ce site utilise des cookies pour améliorer votre expérience utilisateur et optimiser le fonctionnement du site.
Des contenus publicitaires vous sont aussi présentés, ainsi que cookies de partages sur les réseaux sociaux.

Vous pouvez accepter ces cookies en cliquant sur « Autoriser tous les cookies », cliquer sur « Paramétrer les cookies » pour gérer vos préférences de cookies.