La pseudo-clase :only-child de CSS representa un elemento sin hermanos. Esto es lo mismo que :first-child:last-child o :nth-child(1):nth-last-child(1), pero con una especificidad menor.

/* Selecciona cada <p>, pero solo si es el */
/* único hijo de su padre */
p:only-child {
  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-child

Ejemplos

Ejemplo básico

HTML

<main>
  <div>
    <i>Soy un hijo único y solitario.</i>
  </div>

  <div>
    <i>Yo tengo hermanos.</i><br>
    <b>¡Yo también!</b><br>
    <span>Yo también tengo hermanos, <span>pero este es un hijo único.</span></span>
  </div>
</main>

CSS

main :only-child {
  color: red;
}

Resultado

Ejemplo de lista

HTML

<ol>
  <li>Primero
    <ul>
      <li>Esta lista tiene solo un elemento.
    </ul>
  </li>
  <li>Segundo
    <ul>
      <li>Esta lista tiene tres elementos.
      <li>Esta lista tiene tres elementos.
      <li>Esta lista tiene tres elementos.
    </ul>
  </li>
<ol>

CSS

li li {
  list-style-type: disc;
}
li:only-child {
  color: red;
  list-style-type: square;
}

Resultado

Especificaciones

Specification Status Comment
Selectors Level 4
La definición de ':only-child' en esta especificación.
Working Draft Los elementos coincidentes no requieren tener un padre.
Selectors Level 3
La definición de ':only-child' en esta especificación.
Recommendation
Definición Inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo 2Edge Soporte completo SiFirefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 9.5Safari Soporte completo 3.1WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 10Safari iOS Soporte completo 3.1Samsung Internet Android Soporte completo Si
Matches elements with no parentChrome Soporte completo 57Edge ? Firefox Soporte completo 52IE ? Opera Soporte completo 44Safari ? WebView Android Soporte completo 57Chrome Android Soporte completo 57Edge Mobile ? Firefox Android Soporte completo 52Opera Android Soporte completo 44Safari iOS ? Samsung Internet Android Soporte completo 7.0

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown

Ver también

Etiquetas y colaboradores del documento

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