Resumen

La pseudoclase CSS :only-child representa cualquier elemento que sea el único hijo de su padre. Es lo mismo que :first-child:last-child o :nth-child(1):nth-last-child(1) pero con una especificidad más baja.

Sintaxis

padre hijo:only-child {
  propiedad: valor;
} 

Ejemplos

Ejemplo básico

span:only-child {
  color: red;
}
<div>
  <span>Este span es el único hijo de su padre</span>
</div>

<div>
  <span>Este span es uno de los dos hijos de su padre</span>
  <span>Este span es uno de los dos hijos de su padre</span>
</div> 

Resultado

Ejemplo de un listado

li li {
  list-style-type: disc;
}
li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}
<ol>
  <li>Primero
    <ul>
      <li>Este elemento es hijo único</li>
    </ul>
  </li>
  <li>Segundo
    <ul>
      <li>Esta lista tiene dos elementos</li>
      <li>Esta lista tiene dos elementos</li>
    </ul>
  </li>
  <li>Tercero
    <ul>
      <li>Esta lista tiene tres elementos</li>
      <li>Esta lista tiene tres elementos</li>
      <li>Esta lista tiene tres elementos</li>
    </ul>
  </li>
<ol>

Resultado

Especificaciones

Specification Status Comment
Selectors Level 4
La definición de ':only-child' en esta especificación.
Working Draft No change
Selectors Level 3
La definición de ':only-child' en esta especificación.
Recommendation Initial definition

Compatibilidad entre navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 2 1.5 (1.8) 9 9.5 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.8) 9 10.0 3.1

 

Etiquetas y colaboradores del documento

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