Pseudo classes nth-child et nth-of-type

Les pseudo classes nth-child et nth-of-type permettent de cibler des éléments présents dans un même élément parent.

Notions css abordées : nth-child, first-child, last-child, nth-of-type, first-of-type, last-of-type.

La compréhension par le code

<!-- html -->
<div class="wrap_elts">
    <p>PA</p>
    <h1>TA</h1>
    <h1>TB</h1>
    <p>PB</p>
    <h1>TC</h1>
    <h1>TD</h1>
    <p>PC</p>
    <p>PD</p>
    <p>PE</p>
    <p>PF</p>
</div>


<!-- css -->
<style>
/******************************************/
/************* nth-child(an+b) ************/
/******************************************/
/* Les elements pris en compte sont : */
/* 1 element sur a à partir de b si la balise html est celle 
   attachée à la pseudo classe */

Exemple h1:nth-child(2n+3)
/* Elements concernés : */
/* 1 element sur 2 à partir de 3 si la balise est h1 */
/* Résultat : les elements affichés en rouge seront TB et TC*/
.wrap_elts > h1:nth-child(2n+3) {
	color: red;
}

Exemple p:nth-child(3n+4)
/* Elements concernés : */
/* 1 élément sur 3 à partir de 4 si la balise est h1 */
/* Résultat : les éléments affichés en rouge seront PB PC et PF*/
.wrap_elts > p:nth-child(3n+4) {
	color: red;
}


/******************************************/
/*************** first-child **************/
/******************************************/
/* Les éléments pris en compte sont : */
/* Le premier élément si la balise html est celle 
   attachée à la pseudo classe */

Exemple p:first-child :
/* Élément concerné : le premier élément si c'est un paragraphe */
/* Résultat : l'élément affiché en rouge sera PA */
.wrap_elts > p:first-child {
	color: red;
}


/******************************************/
/**************** last-child **************/
/******************************************/
/* Les éléments pris en compte sont : */
/* Le dernier élément si la balise html est celle
   attachée à la pseudo classe */

Exemple : h1:last-child 
/* Élément concerné : le dernier élément si c'est un titre */
/* Résultat : aucun élément affiché en rouge */
.wrap_elts > h1:last-child {
	color: red;
}


/******************************************/
/************* nth-of-type(an+b) **********/
/******************************************/
/* Les éléments pris en compte sont : */
/* 1 élément sur a à partir de b en ne considérant
   que les balises html attachées à la pseudo classe */

Exemple h1:nth-of-type(2n+3)
/* Éléments concernés : 1 élément sur 2 à partir de 3 en ne
   considérant que les h1 */
/* Résultat : L’élément affiché en rouge sera TC */
.wrap_elts > h1:nth-of-type(2n+3) {
	color: red;
}

Exemple : p:nth-of-type(2n+2)
/* Élément concerné : 1 élément sur 2 à partir de 2 en ne
   considérant que les p */
/* Résultat : Les éléments affichés en rouge seront PB PD et PF */
/*
.wrap_elts > p:nth-of-type(2n+2) {
	color: red;
}
*/


/******************************************/
/************** first-of-type *************/ 
/******************************************/
/* Élément pris en compte : */
/* Le premier élément en ne considérant que les balises html 
   attachées à la pseudo classe */

Exemple : h1:first-of-type
/* Élément concerné : Le premier h1 */
/* Résultat : l' élément affiché en rouge sera TA */
.wrap_elts > h1:first-of-type {
	color: red;
}


/******************************************/
/*************** last-of-type *************/
/******************************************/
/* Élément pris en compte : */
/* Le dernier élément en ne considérant que les balises html 
   attachées à la pseudo classe */

Exemple : h1:last-of-type
/* Élément concerné : Le dernier h1 */
/* Résultat : l' élément affiché en rouge sera TD */
.wrap_elts > h1:last-of-type {
	color: red;
}
</style>