-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
78 lines (57 loc) · 1.59 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
---
title: ":last-of-type"
slug: Web/CSS/:last-of-type
---
{{CSSRef}}
La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`: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.
```css
/* Cible n'importe quel paragraphe qui est */
/* le dernier paragraphe de son élément parent */
p:last-of-type {
color: lime;
}
```
> [!NOTE]
> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
## Syntaxe
{{csssyntax}}
## Exemples
Pour cibler le dernier élément {{HTMLElement("em")}} au sein d'un élément {{HTMLElement("p")}}, on pourra utiliser la règle qui suit (illustrée ensuite sur un fragment HTML).
### CSS
```css
p em:last-of-type {
color: lime;
}
```
### HTML
```html
<p>
<em>Je ne suis pas vert :(</em>
<strong>Je ne suis pas vert :(</strong>
<em>Je suis vert :D</em>
<strong>Je ne suis pas vert non plus :(</strong>
</p>
<p>
<em>Je ne suis pas vert :(</em>
<span>
<em>Je suis vert !</em>
</span>
<strong>Je ne suis pas vert :(</strong>
<em>Je suis vert :D</em>
<span>
<em>Je suis aussi vert !</em>
<strike>Je ne suis pas vert</strike>
</span>
<strong>Je ne suis pas vert non plus :(</strong>
</p>
```
### Résultat
{{EmbedLiveSample('Exemples','100%', '120')}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- {{cssxref(":nth-last-of-type")}}
- {{cssxref(":first-of-type")}}
- {{cssxref(":last-child")}}