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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico2 Si1.599.53.1
Matches elements with no parent57 ?52 ?44 ?
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico Si Si Si4103.1 Si
Matches elements with no parent5757 ?5244 ?7.0

Ver también

Etiquetas y colaboradores del documento

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