:nth-of-type CSS sélecteur

Définition de la CSS :nth-of-type.

La pseudo-classe CSS :nth-of-type() permet de cibler tous les n-ième enfants de chaque liste d'enfants directs de même type (span, b, div, etc.) d'un même élément parent, afin de leur assigner des propriétés CSS.
:nth-of-type() commence sa sélection du n-ième enfant par le début de chaque liste des enfants de même type d'un même élément parent, à l'inverse de .

Exemple de syntaxe CSS :nth-of-type :
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' */
}

La pseudo-classe CSS :nth-of-type(paramètre) CSS accepte comme paramètres :

  • numérique, nombre entier. Si positif on sélectionne un seul fils, le "numérique"ème par exemple. Si négatif aucun fils n'est sélectionné.
  • odd, équivaux à faire nth-of-type(2n+1).
  • even, équivaux à faire nth-of-type(2n).
  • an+b, "a" est entier positif ou négatif suivit de "n", "b" entier précédé de "-" ou de "+" qui détermine s'il est positif ou négatif. Par exemple 2n+2.
  • Si "a" égale "1", il peut être omis.
Reportez vous au chapitre "Comment cela fonctionne nth-of-type(an+b)" plus bas pour comprendre le fonctionnement.

Si vous mettez un sélecteur accolé et devant ":" de la pseudo-classe :nth-of-type() CSS, alors seul les fils correspondant à la règle de ce sélecteur seront pris en compte.

Conditions d'application de la CSS :nth-of-type.

La pseudo-classe de feuille de style :nth-of-type() CSS ne peut pas se déclarer dans l'attribut HTML ou XHTML STYLE.
La pseudo-classe CSS :nth-of-type() doit être déclarée dans une balise HTML ou XHTML .

Problème d'interprétation de :nth-of-type en Css.

La pseudo-classe de feuille de style :nth-of-type() CSS n'est prise en compte qu'a partir de la version d'Internet Explorer 9+, Safari 3.1+, Chrome 1+ , Opera 9.5+ et Firefox 3.5+.

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).

Exemple d'écriture CSS de :nth-of-type() avec règle
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 :

Exemple d'écriture CSS de :nth-of-type() avec ciblage de parent
.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 "" de votre page :

Exemple d'écriture CSS :nth-of-type() dans une balise STYLE
<STYLE>
  div:nth-of-type{}
</STYLE>

A l'inverse de la pseudo-classe CSS , 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.

Pour savoir quels fils seront sélectionnés avec 4n-2, vous devez faire le calcul suivant :
  • 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.

Pour savoir quels fils seront sélectionnés avec -1n+4, vous devez faire le calcul suivant :
  • -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.

Attention petit rappel : l'arbre des fils est variable selon le sélecteur accolé à la pseudo-classe CSS :nth-of-type().

Quelques équivalences d'écriture de nth-of-type()

Sélectionne seulement le 1er fils :

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

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

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

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

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

Sélectionne tous les fils :

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

Sélectionne les 5 premiers fils :

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

Sélectionne les 5 premiers fils :

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

Sélectionne tous les fils sauf les 5 premiers :

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

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

Votez pour la définition CSS :nth-of-type

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/nth-of-type-css-selector.html Votes: 5 / 5 - 2 votes
Cliquez sur une étoile pour voter.