:nth-of-type CSS sélecteur

identifiant :nth-of-type(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-of-type(even){
  /* Propriétés CSS assignées aux enfants de type balise TR ayant une position paire dans les balises HTML ayant comme parent direct ou indirect 'identifiant' */
}
identifiant tr:nth-of-type(odd){
  /* Propriétés CSS assignées aux enfants de type balise TR ayant une position impaire dans les balises HTML ayant comme parent direct ou indirect 'identifiant' */
}

Règles de syntaxes CSS pour :nth-of-type.

Comprendre l'écriture du sélécteur Css :nth-of-type()

La pseudo-classe CSS :nth-of-type(règle) s'applique chaque enfant de même type correspondant à la "règle (an+b, odd, ...)" de tous les éléments HTML ou XHTML. 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-of-type(règle).

Pour schématiser, il faut imaginer que par défaut la pseudo-classe CSS :nth-of-type(règle) s'écrit *:nth-of-type(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 la cas d'un chemin de sélection pour sélectionner le parent (vous comprendrez mieux avec les exemples qui suivent).

b:nth-of-type(odd) {
  /* Propriétés CSS assignées à l'ensemble des fils de même type de position impaire dans la liste des enfants de sont parent, de n'importe quel élément */
}
.maclass:nth-of-type(even) {
  /* Propriétés CSS assignées à l'ensemble des fils de même type de position paire et de classe "maclass" dans la liste des enfants de son parent, de n'importe quel élément */
}
:not(span):nth-of-type(odd) {
  /* Propriétés CSS assignées à l'ensemble des fils de même type de position impaire qui ne sont pas de type SPAN dans la liste des enfants de même type 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-of-type(odd) {
  /* Propriétés CSS assignées à l'ensemble des fils de même type de position impaire dans la liste des enfants dont le parent direct ou indirect à la classe "identifant" */
}
.identifant .maclass:nth-of-type(even) {
  /*  Propriétés CSS assignées à l'ensemble des fils de même type de position paire et de classe "maclass" dans la liste des enfants dont le parent direct ou indirect à la classe "identifant" */
}
.identifant :not(span):nth-of-type(odd) {
  /* Propriétés CSS assignées à l'ensemble des fils de même type de position impaire qui ne sont pas de type SPAN dans la liste des enfants dont le parent direct ou indirect à la classe "identifant" */
}

Info complémentaire sur le sélécteur Css :nth-of-type()

Attention, la pseudo-classe CSS ":nth-of-type" a une écriture un peu spéciale, "nth-of-type" est toujours précédée de ":" et suivit d'un paramètre entre parenthèses.
Si le paramètre est mal écrit, alors la propriété Css à laquelle est assignée :nth-of-type() est ignorée.

La pseudo-classe CSS :nth-of-type() 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>
  div:nth-of-type{}
</STYLE>

A l'inverse de la pseudo-classe CSS :nth-last-of-type(), la pseudo-classe CSS :nth-of-type() commence la sélection par la fin de la lites des enfants.

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

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.

Compatibilités navigateurs du sélecteur :nth-of-type

Exemples et astuces CSS pour utiliser :nth-of-type

Comment fonctionne le sélécteur Css nth-of-type(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-of-type()

Sélectionne seulement le 1er fils :

identifiant:nth-of-type(0n+1);
identifiant:nth-of-type(1);

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

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

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

identifiant:nth-of-type(2n);
identifiant:nth-of-type(even);

Sélectionne tous les fils :

identifiant:nth-of-type(1n+0);
identifiant:nth-of-type(n+0);
identifiant:nth-of-type(n)
identifiant

Sélectionne les 5 premiers fils :

identifiant:nth-of-type(-1n+5);

Sélectionne les 5 premiers fils :

identifiant:nth-of-type(-1n+5);

Sélectionne tous les fils sauf les 5 premiers :

identifiant:nth-of-type(1n+5);

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