:last-of-type
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La pseudo-classe CSS :last-of-type cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.
Exemple interactif
dt {
font-weight: bold;
}
dd {
margin: 3px;
}
dd:last-of-type {
border: 2px solid orange;
}
<dl>
<dt>Légumes :</dt>
<dd>1. Tomates</dd>
<dd>2. Concombres</dd>
<dd>3. Champignons</dd>
<dt>Fruits :</dt>
<dd>4. Pommes</dd>
<dd>5. Mangues</dd>
<dd>6. Poires</dd>
<dd>7. Oranges</dd>
</dl>
Syntaxe
:last-of-type {
/* ... */
}
Exemples
Mise en forme du dernier paragraphe
HTML
<h2>En-tête</h2>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
CSS
p:last-of-type {
color: red;
font-style: italic;
}
Résultat
Éléments imbriqués
Cet exemple montre comment les éléments imbriqués peuvent également être ciblés. Notez que le sélecteur universel (*) est implicite lorsqu'aucun sélecteur simple n'est écrit.
HTML
<article>
<div>Je ne suis pas rose car première `div` :(</div>
<div>
Je ne suis pas rose :(
<span
>Mais moi je suis rose car je suis le dernier `span` de mon groupe !</span
>
</div>
<div>
Ici <em>je ne suis pas rose :(</em>, mais ici
<em>je suis rose et dernier !</em>
</div>
<p>Je suis un paragraphe rose.</p>
<div>Je suis rose car dernière `div` !</div>
</article>
CSS
article :last-of-type {
background-color: pink;
}
Résultat
Éléments avec plusieurs sélecteurs
Cet exemple HTML contient des éléments imbriqués de différents types. Le CSS contient à la fois des sélecteurs de type et des sélecteurs de classe.
HTML
<p>Ce `p` n'est pas sélectionné.</p>
<p>Ce `p` n'est pas sélectionné non plus.</p>
<p>
Ce `p` est le dernier élément `p` de son parent, par exemple `body`,
sélectionné par le sélecteur de type `p`.
</p>
<div class="container">
<div class="item">Ce `div` n'est pas sélectionné.</div>
<div class="item">Ce `div` n'est pas sélectionné non plus.</div>
<div class="item">
Ce `div` est le dernier élément `div` de son parent `div`, sélectionné par
le sélecteur de classe `.container .item`.
</div>
<p class="item">
Ce `p` est le dernier élément `p` de son parent `div`, sélectionné par le
sélecteur de classe `.container .item`.
</p>
</div>
CSS
p:last-of-type {
background: skyblue;
}
.container .item:last-of-type {
color: red;
font-weight: bold;
}
Résultat
Le dernier <div> et le dernier <p> sont tous deux rouges et en gras, car le sélecteur .item:last-of-type sélectionne le dernier de chaque type si cet élément dernier a également la classe item.
Spécifications
| Specification |
|---|
| Selectors Level 4 # last-of-type-pseudo |
Compatibilité des navigateurs
Chargement…