Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

:only-child

Este articulo necesita una revisión técnica. Cómo puedes ayudar.

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
The definition of ':only-child' in that specification.
Working Draft No change
Selectors Level 3
The definition of ':only-child' in that specification.
Recommendation Initial definition

Compatibilidad entre navegadores

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,