:last-of-type
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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
Loading…