:first-of-type CSS sélecteur

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

La pseudo-classe CSS :first-of-type permet de cibler tous les éléments qui sont le premier enfant de chaque liste des enfants directs du même type (span, b, div, etc.) d'un même élément parent, afin de lui assigner des propriétés CSS.

Exemple de syntaxe CSS :first-of-type :
:first-of-type{
  /* Propriétés CSS assignées au premier enfant de son type dans toutes les balises HTML */
}
identifiant :first-of-type{
  /* Propriétés CSS assignées au premier enfant de son type dont le parent direct ou indirect est "identifiant" */
}
identifiant div:first-of-type{
  /* Propriétés CSS assignées au premier enfant de type DIV dont le parent direct ou indirect est "identifiant" */
}

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

Il est possible de remplacer :first-of-type en utilisant d'autres pseudo-classes Css.

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

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

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

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

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

Comprendre l'écriture du sélécteur Css :first-of-type

La pseudo-classe CSS :first-of-type s'applique chaque élément qui est le premier enfant de son type HTML ou XHTML de tous les éléments HTML ou XHTML. Vous pouvez donc si nécessaire mettre un sélecteur devant pour conditionner la sélection du premier enfant de son type, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML qui répondent à :first-of-type.

Pour schématiser, il faut imaginer que par défaut la pseudo-classe CSS :first-of-type s'écrit *:first-of-type. "*" représente la condition soit "n'importe quel élément" (sélectionne tous les premiers enfants de chaque type 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 premiers fils de chaque type que vous voulez sélectionner.
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).

Exemple d'écriture CSS de :first-of-type avec règle
b:first-of-type{
  /* Propriétés CSS assignées à l'ensemble des premiers fils type balise B, de n'importe quel élément */
}
.regle:first-of-type{
  /* Propriétés CSS assignées à l'ensemble des premiers fils de chaque type ayant une classe "regle", de n'importe quel élément */
}
:not(span):first-of-type{
  /* Propriétés CSS assignées à l'ensemble des premiers fils de chaque type et qui ne sont pas de type SPAN, 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 uniques en mettant un chemin de sélection devant :

Exemple d'écriture CSS de :first-of-type avec ciblage de parent
.identifant b:first-of-type{
  /* Propriétés CSS assignées à l'ensemble des premiers fils type balise B, dont le parent direct ou indirect a la classe "identifant" */
}
.identifant .regle:first-of-type{
  /* Propriétés CSS assignées à l'ensemble des premiers fils de chaque type ayant une classe "regle", dont le parent direct ou indirect à la classe "identifant" */
}
.identifant :not(span):first-of-type{
  /* Propriétés CSS assignées à l'ensemble des premiers fils de chaque type et qui ne sont pas de type SPAN, dont le parent direct ou indirect a la classe "identifant" */
}

Info complémentaire sur le sélécteur Css :first-of-type

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

La pseudo-classe CSS :first-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 :first-of-type dans une balise STYLE
<STYLE>
  abbr:first-of-type{}
</STYLE>

La pseudo-classe CSS :first-of-type peut être remplacée par la pseudo-classe CSS .

Exemple d'équivalence avec :nth-of-type()
:first-of-type{}
//Identique à 
:nth-of-type(1){}

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

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

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

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

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