:only-child
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.
/* 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
Error: could not find syntax for this item
Exemples
Exemple simple
CSS
span:only-child {
color:red;
}
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
Exemple avec une liste
CSS
li li {
list-style-type : disc;
}
li:only-child {
color: #6699ff;
font-style: italic;
list-style-type: square;
}
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
Spécifications
Specification |
---|
Selectors Level 4 # only-child-pseudo |
Compatibilité des navigateurs
BCD tables only load in the browser