CSS :first-of-type Pseudo-classe
La pseudo-classe CSS :first-of-type sélectionne le premier élément de son type parmi ses frères. Lisez la définition et essayez des exemples.
La pseudo-classe CSS :first-of-type sélectionne un élément qui est le premier élément de son type parmi ses frères. Elle est équivalente à [:nth-of-type(1)](/learn-css/nth-of-type).
Le sélecteur compte les frères selon leur nom de balise HTML, et non par classe, attribut ou rôle. Pour chaque type d'élément distinct à l'intérieur d'un parent, un seul élément peut correspondre à :first-of-type — le premier de cette balise. Cela signifie qu'un même parent peut avoir plusieurs correspondances :first-of-type simultanément (une par balise), ce qui est le comportement qui surprend le plus souvent les personnes venant de :first-child.
:first-of-type vs :first-child
Le sélecteur :first-of-type est souvent comparé à :first-child, mais ils diffèrent dans leur portée. Tandis que :first-child correspond à un élément uniquement lorsqu'il est le tout premier enfant de son parent, quel que soit son type, :first-of-type correspond au premier frère d'un type donné même lorsque d'autres éléments le précèdent. Les deux sélecteurs partagent la même spécificité CSS.
Considérez ce balisage :
<div>
<h2>Heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>p:first-childne correspond à rien — le premier enfant est le<h2>, pas un<p>.p:first-of-typecorrespond au premier<p>("First paragraph"), car c'est le premier paragraphe parmi ses frères.
Utilisez :first-of-type lorsque vous voulez cibler « le premier titre », « la première liste » ou « le premier paragraphe » dans un conteneur, quel que soit l'ordre des balises précédentes. Utilisez :first-child uniquement lorsque l'élément doit littéralement être le premier enfant.
Quand l'utiliser
Quelques cas d'usage pratiques :
- Styliser le paragraphe d'introduction d'un article sans ajouter de classe dans le balisage.
- Supprimer la marge supérieure ou la bordure du premier élément d'un composant répété (par ex. le premier
<figure>dans une galerie). - L'associer avec
:last-of-typepour supprimer les marges extérieures d'une pile, ou avec:nth-of-type()lorsque vous avez besoin d'une position autre que la première.
Si un parent ne contient qu'un seul élément d'un type, cet élément est à la fois son :first-of-type et son :only-of-type.
À partir du niveau 4 des sélecteurs, l'élément sélectionné n'a pas strictement besoin d'un nœud parent dans le DOM pour correspondre.
Version
Syntaxe
Syntaxe CSS de :first-of-type
:first-of-type {
css declarations;
}Exemple du sélecteur :first-of-type :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Exemple du sélecteur :first-of-type avec la balise <article> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
font-size: 22px;
color: #777777;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<h2>This is a title.</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
</article>
</body>
</html>Exemple du sélecteur :first-of-type avec plusieurs balises HTML :
Ici, article:first-of-type correspond uniquement au premier <article>, donc son fond sombre n'est pas appliqué au second. Le sélecteur est limité par parent et par balise, ce qui le rend idéal pour styliser la première instance d'un bloc répété.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 0;
}
article:first-of-type {
background-color: #777777;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<p>This is a first element!</p>
<p>This <em>nested 'em' is first</em>!</p>
<p>This <strong>nested 'strong' is first</strong>, but this <strong>nested 'strong' is last</strong>!</p>
<p>This <span>nested 'span' gets styled</span>!</p>
<q>This is a 'q' element!</q>
<p>This is a last element.</p>
</article>
<article>
<p>This is a second article.</p>
</article>
</body>
</html>Compatibilité des navigateurs
| Navigateur | Version |
|---|---|
| Chrome | 1.0 |
| Firefox | 1.0 |
| Safari | 1.0 |
| Edge | 12.0 |
| Opera | 7.0 |
| IE | 9.0 |