:nth-child CSS sélecteur

identifiant :nth-child(2n+1){
  /* Propriétés CSS assignées aux enfants qui correspondent à la règle "2n+1" dans les balises HTML ayant comme parent direct ou indirect "identifiant " */
}
identifiant tr:nth-child(even){
  /* Propriétés CSS assignées aux enfants ayant une position paire dans les balises HTML ayant comme parent direct ou indirect "identifiant " et si ces derniers sont de type balise TR */
}
identifiant tr:nth-child(odd){
  /* Propriétés CSS assignées aux enfants ayant une position impaire dans les balises HTML ayant comme parent direct ou indirect "identifiant " et si ces derniers sont de type balise TR */
}

Règles de syntaxes CSS pour :nth-child.

Comprendre l'écriture de :nth-child()

La pseudo-classe CSS :nth-child(règle) s'applique chaque enfant correspondant à la "règle (an+b, odd, ...)" de tous les éléments HTML ou XHTML quelque soit leur position. Vous pouvez donc si nécessaire mettre un sélecteur devant, pour conditionner la sélection des enfants en plus de la "règle", sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML dont les enfants répondent à :nth-child(règle).

Pour schématiser, il faut imaginer que par défaut la pseudo-classe CSS :nth-child(règle) s'écrit *:nth-child(règle). "*" représente la condition soit "n'importe quel élément" (sélectionne tous les enfants correspondant à la "règle" sans distinction).
Donc pour conditionner plus précisément la sélection, il faut juste remplacer "*" par un autre sélecteur qui vous permettra de distinguer les enfants que vous voulez sélectionner parmi les résultats de la peudo-classe.
Ce sélecteur doit être unique (classe, id, balise ou pseudo-classe) ou multiple à condition de ne pas contenir d'espace entre chaque sélecteur, sinon on passe dans le cas d'un chemin de sélection pour sélectionner le parent (vous comprendrez mieux avec les exemples qui suivent).

:nth-child(odd) {
  /* Propriétés CSS assignées à l'ensemble des fils de position impaire dans la liste des enfants de son parent, de n'importe quel élément */
}
b:nth-child(odd) {
  /* Propriétés CSS assignées à l'ensemble des fils de type balise HTML B de position impaire dans la liste des enfants de son parent, de n'importe quel élément */
}
.maclass:nth-child(even) {
  /* Propriétés CSS assignées à l'ensemble des fils de position paire et de classe "maclass" dans la liste des enfants de son parent, de n'importe quel élément */
}
:not(span):nth-child(odd) {
  /* Propriétés CSS assignées à l'ensemble des fils de position impaire qui ne sont pas de type SPAN dans la liste des enfants de son parent, de n'importe quel élément */
}

Maintenant, vous pouvez être plus précis dans pour cibler l'élément parent dans lequel vous voulez sélectionner les fils, en mettant un chemin de sélection devant :

.identifant b:nth-child(odd) {
  /* Propriétés CSS assignées à l'ensemble des fils de balise HTML B de position impaire dans la liste des enfants dont le parent direct ou indirect a la classe "identifant" */
}
.identifant > b:nth-child(odd) {
  /* Propriétés CSS assignées à l'ensemble des fils de balise HTML B de position impaire dans la liste des enfants dont le parent direct a la classe "identifant" */
}
.identifant .maclass:nth-child(even) {
  /*  Propriétés CSS assignées à l'ensemble des fils de position paire et de classe "maclass" dans la liste des enfants  dont le parent direct ou indirect a la classe "identifant" */
}
.identifant :not(span):nth-child(odd) {
  /* Propriétés CSS assignées à l'ensemble des fils de position impaire qui ne sont pas de type SPAN dans la liste des enfants dont le parent direct ou indirect a la classe "identifant" */
}

Les boites anonymes et le sélécteur Css :nth-child()

Attention : Les boites anonymes n'apparaissent pas dans l'arbre du document, c'est pourquoi elles ne sont pas prises en compte au moment de la mise en forme des enfants.

Info complémentaire sur le sélécteur Css :nth-child

Attention, la pseudo-classe CSS ":nth-child" a une écriture un peu spéciale, "nth-child" est toujours précédée de ":".

La pseudo-classe CSS :nth-child ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE" ou dans une feuille de style externe.
Elle se déclare dans une balise HTML ou XHTML "STYLE" de votre page :

<STYLE>
  td:nth-child{}
</STYLE>

Compatibilités navigateurs du sélecteur :nth-child

Exemples et astuces CSS pour utiliser :nth-child

Comment fonctionne le sélécteur Css nth-child(an+b)

an+b, comment cela fonctionne :
Pour savoir quels fils seront sélectionnés avec 2n+2, vous devez faire le calcul suivant :

• 2 * 0 + 2 = 2, soit le 2ème fils.
• 2 * 1 + 2 = 4, soit le 4ème fils.
• 2 * 2 + 2 = 6, soit le 6ème fils.
• Et ainsi de suite.

• 4 * 0 - 2 = -2, les résultats négatifs sont ignorés car ne représente aucun élément dans l'arbre des fils.
• 4 * 1 - 2 = 2, soit le 2ème fils.
• 4* 2 - 2 = 6, soit le 6ème fils.
• 4* 3 - 2 = 6, soit le 10ème fils.
• Et ainsi de suite.

• -1 * 0 + 4 = 4, soit le 4ème fils.
• -1 * 1 + 4 = 3, soit le 3ème fils.
• -1 * 2 + 4 = 2, soit le 2ème fils.
• -1 * 3 + 4 = 1, soit le 1er fils.
• -1 * 4 + 4 = 0, 0 est ignoré car ne représente aucun élément dans l'arbre des fils.
• -1 * 5 + 4 = -1, les résultats négatifs sont ignorés car représente aucun élément dans l'arbre des fils.
• Tous les autres résultats sont négatifs donc ignorés.

Quelques équivalences d'écriture de nth-child()

Sélectionne seulement le 1er fils :

identifiant:nth-child(0n+1);
identifiant:nth-child(1);

Sélectionne seulement les fils ayant un index impaire (1, 3, 5, ...) :

identifiant:nth-child(2n+1);
identifiant:nth-child(odd);

Sélectionne seulement les fils ayant un index paire (2, 4, 6, ...) :

identifiant:nth-child(2n);
identifiant:nth-child(even);

Sélectionne tous les fils :

identifiant:nth-child(1n+0);
identifiant:nth-child(n+0);
identifiant:nth-child(n)
identifiant

Sélectionne les 5 premiers fils :

identifiant:nth-child(-1n+5);

Sélectionne tous les fils sauf les 5 premiers :

identifiant:nth-child(1n+5);

Votre avis sur la définition :nth-child en CSS