-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
66 lines (46 loc) · 1.32 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
---
title: Sélecteurs enfant
slug: Web/CSS/Child_combinator
---
{{CSSRef}}
Le combinateur `>` sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants **directs** des éléments ciblés par le premier sélecteur.
```css
/* Les éléments <li> qui sont des enfant d'un */
/* <ul class="mon-truc"> */
ul.mon-truc > li {
margin: 2em;
}
```
En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.
## Syntaxe
```
selecteur1 > selecteur2 { déclarations CSS }
```
## Exemples
### CSS
```css
span {
background-color: white;
}
div > span {
background-color: blue;
}
```
### HTML
```html
<div>
<span
>Premier span du div.
<span>Deuxième span, dans un span dans un div.</span>
</span>
</div>
<span>Troisième span, en dehors de tout div.</span>
```
### Résultat
{{EmbedLiveSample("Exemples", "100%", 100)}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [Le combinateur de descendant](/fr/docs/Web/CSS/Sélecteurs_descendant)