:only-of-type
La pseudo-classe :only-of-type
CSS permet de cibler un élément qui ne possède aucun nœud frère du même type pour un même élément parent (par exemple, sélectionner le seul élément <em>
d'un <dd>
).
/* Cible un élément <p> si celui-ci est le */
/* seul paragraphe de son élément parent */
p:only-of-type {
background-color: lime;
}
Note : Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
Syntaxe
Error: could not find syntax for this item
Exemples
CSS
li li {
list-style-type : disc;
}
li:only-of-type {
color: #6699ff;
font-style: italic;
list-style-type: square;
}
HTML
<ol>
<li>Premier
<ul>
<li>Ceci est l'unique li</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>
<ol>
<li>Une seule liste imbriquée
<ul>Avec
<li>Un seul item</li>
</ul>
</li>
</ol>
Résultat
Spécifications
Specification |
---|
Selectors Level 4 # only-of-type-pseudo |
Compatibilité des navigateurs
BCD tables only load in the browser