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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
---
title: ':only-child'
slug: 'Web/CSS/:only-child'
tags:
- CSS
- Pseudo-classe
- Reference
translation_of: 'Web/CSS/:only-child'
---
<div>{{CSSRef}}</div>
<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:only-child</code></strong> 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 <code>:first-child:last-child</code> ou <code>:nth-child(1):nth-last-child(1)</code>, mais avec une spécificité inférieure.</p>
<pre class="brush: css no-line-numbers">/* Cible chaque élément <p> si celui-ci */
/* est le seul élément fils de son parent */
p:only-child {
background-color: lime;
}</pre>
<div class="note">
<p><strong>Note :</strong> 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.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_simple">Exemple simple</h3>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">span:only-child {
color:red;
}
</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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>
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample('Exemple_simple', '100%', 150)}}</p>
<h3 id="Exemple_avec_une_liste">Exemple avec une liste</h3>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css l">li li {
list-style-type : disc;
}
li:only-child {
color: #6699ff;
font-style: italic;
list-style-type: square;
}</pre>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html language-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>
</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample('Exemple_avec_une_liste', '100%', 150)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.selectors.only-child")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref(":only-of-type")}}</li>
<li>{{cssxref(":first-child")}}</li>
<li>{{cssxref(":last-child")}}</li>
<li>{{cssxref(":nth-child")}}</li>
</ul>
|
