:only-child
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La pseudo-classe :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.
Exemple interactif
li:only-child {
color: fuchsia;
}
b:only-child {
text-decoration: underline;
}
<p>Stars attendues :</p>
<ol>
<li>Robert Downey, Jr.</li>
</ol>
<p>Stars encore à confirmer :</p>
<ol>
<li>Scarlett Johansson</li>
<li>Samuel L. Jackson</li>
<li>Chris Pratt</li>
</ol>
<p>La cérémonie va se dérouler au <b>Théâtre Dolby</b>.</p>
Syntaxe
css
:only-child {
/* ... */
}
Exemples
Exemple simple
HTML
html
<div>
<div>Je suis un enfant unique.</div>
</div>
<div>
<div>Je suis le 1er frère.</div>
<div>Je suis le 2ème frère.</div>
<div>
Je suis le 3ème frère,
<div>mais ceci est un enfant unique.</div>
</div>
</div>
CSS
css
div:only-child {
color: red;
}
div {
display: inline-block;
margin: 6px;
outline: 1px solid;
}
Résultat
Exemple avec une liste
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>
CSS
css
li li {
list-style-type: disc;
}
li:only-child {
color: red;
list-style-type: square;
}
Résultat
Spécifications
| Spécification |
|---|
| Selectors Level 4 # only-child-pseudo |
Compatibilité des navigateurs
Voir aussi
- La pseudo-classe
:only-of-type - La pseudo-classe
:first-child - La pseudo-classe
:last-child - La pseudo-classe
:nth-child