La pseudo-clase :only-of-type CSS representa un elemento que no tiene hermanos del mismo tipo.

/* Selecciona cada <p>, pero solo si es el único */
/* elemento <p> dentro de su padre */
p:only-of-type {
  background-color: lime;
}

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

Sintaxis

:only-of-type

Ejemplo

HTML

<main>
  <div>Soy un `div` #1.</div>
  <p>Yo soy el único `p` entre mis hermanos.</p>
  <div>Soy un `div` #2.</div>
  <div>Soy un `div` #3.
    <i>Yo soy el único hijo `i`.</i>
    <em>Soy un `em` #1.</em>
    <em>Soy un `em` #2.</em>
  </div>
</main>

CSS

main :only-of-type {
  color: red;
}

Resultado

Especificaciones

Especificación Estado Comentarios
Selectors Level 4
La definición de ':only-of-type' en esta especificación.
Working Draft Los elementos coincidentes no requieren tener un padre.
Selectors Level 3
La definición de ':only-of-type' en esta especificación.
Recommendation Definición Inicial.

Compatibilidad con navegadores

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico1 Si3.599.53.2
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico2.1 ? Si4103.2 ?

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: lajaso
 Última actualización por: lajaso,