Sélecteur :ONLY-OF-TYPE

Rôle

Le sélecteur only-of-type est une pseudo-classe désigné par la syntaxe :only-of-type qui permet de cibler chaque élément qui est le seul enfant d’un type particulier de son parent.

Note : contrairement au sélecteur only-child il peut y avoir d’autres éléments situés au même niveau hiérarchique que celui sur lequel s’applique le sélecteur only-of-type, à condition que leurs types soient différents.

Dans l’exemple ci-dessous, la présence du titre dans le deuxième bloc n’empêchera pas le paragraphe d’être rouge.

p:only-of-type{
  color: red;
}
<div>
  <p>Lorem ipsum dolor sit amet</p>
</div>
<div>
  <h1>titre</h1>
  <p>Lorem ipsum dolor sit amet</p>
</div>
<div>
  <h1>titre</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
</div>

Version : CSS3

Testez vous-même ce sélecteur

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

Le sélecteur only-of-type est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 9.

A voir aussi

:first-child 
:first-of-type
:only-of-type 
:last-of-type
:nth-child(n) 
:nth-of-type(n) 
:nth-last-child(n) 
:nth-last-of-type(n) 
only-child