La pseudo-class CSS :last-of-type
representa l'Ășltim element del seu tipus entre un grup d'elements germa.
/* Selecciona qualsevol <p> que sigui l'Ășltim element del seu tipus entre els seus germans */
p:last-of-type {
color: lime;
}
Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels selectors de nivell 4, aixĂČ ja no Ă©s necessari.
Sintaxi
:last-of-type
Exemple
Disseny de l'Ășltim parĂ graf
HTML
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
CSS
p:last-of-type {
color: red;
font-style: italic;
}
Resultat
Elements niats
Aquest exemple mostra com es poden dirigir els elements niats. Tingueu en compte que el selector universal selector universal (*
) estĂ implĂcit quan no s'escriu un selector simple .
HTML
<article>
<div>This `div` is first.</div>
<div>This <span>nested `span` is last</span>!</div>
<div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
<b>This `b` qualifies!</b>
<div>This is the final `div`!</div>
</article>
CSS
article :last-of-type {
background-color: pink;
}
Resultat
Especificacions
EspecificaciĂł | Estat | Comentari |
---|---|---|
Selectors Level 4 The definition of ':last-of-type' in that specification. |
Working Draft | No es requereix que els elements coincidents tinguin un pare. |
Selectors Level 3 The definition of ':last-of-type' in that specification. |
Recommendation | DefiniciĂł inicial |
Navegadors compatibles
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
DescripciĂł | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Suport bĂ sic | 1.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 9.5 | 3.2 |
DescripciĂł | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suport bĂ sic | 2.1 | (Yes) | 1.0 (1.9.1) | 9.0 | 10.0 | 3.2 |