blob: 9f04b643c6112b05cc6b3e04bc01a611fd0dd910 (
plain)
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
---
title: ':only-child'
slug: Web/CSS/:only-child
tags:
- CSS
- Pseudo-classe
- Reference
translation_of: Web/CSS/:only-child
---
{{CSSRef}}
La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:only-child`** représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que `:first-child:last-child` ou `:nth-child(1):nth-last-child(1)`, mais avec une spécificité inférieure.
```css
/* Cible chaque élément <p> si celui-ci */
/* est le seul élément fils de son parent */
p:only-child {
background-color: lime;
}
```
> **Note :** En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.
## Syntaxe
{{csssyntax}}
## Exemples
### Exemple simple
#### CSS
```css
span:only-child {
color:red;
}
```
#### HTML
```html
<div>
<span>
Ce span est l'unique enfant
de son parent
</span>
</div>
<div>
<span>
Ce span est l'un des deux
enfants de son parent
</span>
<span>
Ce span est l'un des deux
enfants de son parent
</span>
</div>
```
#### Résultat
{{EmbedLiveSample('Exemple_simple', '100%', 150)}}
### Exemple avec une liste
#### CSS
```css
li li {
list-style-type : disc;
}
li:only-child {
color: #6699ff;
font-style: italic;
list-style-type: square;
}
```
#### HTML
```html
<ol>
<li>Premier
<ul>
<li>Ceci est l'unique élément enfant</li>
</ul>
</li>
<li>Deuxième
<ul>
<li>Cette liste a deux éléments</li>
<li>Cette liste a deux éléments</li>
</ul>
</li>
<li>Troisième
<ul>
<li>Cette liste a trois éléments</li>
<li>Cette liste a trois éléments</li>
<li>Cette liste a trois éléments</li>
</ul>
</li>
</ol>
```
#### Résultat
{{EmbedLiveSample('Exemple_avec_une_liste', '100%', 150)}}
## Spécifications
| Spécification | État | Commentaires |
| ---------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------- |
| {{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS4 Selectors')}} | Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé. |
| {{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale. |
## Compatibilité des navigateurs
{{Compat("css.selectors.only-child")}}
## Voir aussi
- {{cssxref(":only-of-type")}}
- {{cssxref(":first-child")}}
- {{cssxref(":last-child")}}
- {{cssxref(":nth-child")}}
|
