-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
69 lines (48 loc) · 1.53 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
---
title: ":first-of-type"
slug: Web/CSS/:first-of-type
---
{{CSSRef}}
La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:first-of-type`** permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).
```css
/* Cible le premier élément <p> d'un type donné */
/* parmi ses éléments voisins */
p:first-of-type {
color: red;
}
```
> [!NOTE]
> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce prérequis a désormais été abandonné (cf. spécification des sélecteurs pour CSS4).
## Syntaxe
{{csssyntax}}
## Exemples
### CSS
```css
div :first-of-type {
background-color: lime;
}
```
### HTML
```html
<div>
<span>Voici le premier span !</span>
<span>Un autre span, pas le premier.</span>
<span>Quid de cet <em>élément imbriqué </em>?</span>
<b>Un autre type d'élément.</b>
<span>Ce type là est déjà apparu.</span>
</div>
```
### Résultat
{{EmbedLiveSample('Exemples','100%', '120')}}
> [!NOTE]
> On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.
> [!NOTE]
> Les modifications de styles s'appliquent également aux éléments imbriqués, vous pouvez essayer de modifier l'exemple précédent pour cibler le `<div>`.
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- {{cssxref(":nth-of-type")}},
- {{cssxref(":last-of-type")}}
- {{cssxref(":first-child")}}