W3docs
es
Iniciar sesión

CSS :only-child Pseudo Class

Usa la pseudo-clase CSS :only-child para seleccionar y estilizar el único hijo de un padre. Lee sobre la pseudo-clase y practica con ejemplos.

La pseudo-clase :only-child coincide con un elemento que es el único hijo de su padre, es decir, un elemento que no tiene ningún hermano.

El elemento se selecciona solo si su padre no contiene ningún otro hijo de tipo elemento. La pseudo-clase :only-child es funcionalmente equivalente a :first-child:last-child (ser tanto el primer como el último hijo al mismo tiempo significa que no hay nada más en medio), y tiene la misma especificidad de (0,2,0), ya que cuenta como dos pseudo-clases.

Esta página explica qué coincide con :only-child, en qué se diferencia de selectores relacionados como :only-of-type, cómo usarlo en diseños reales y los errores comunes que suelen ocurrir.

Cuándo usar :only-child

:only-child es más útil cuando quieres que un elemento tenga un aspecto diferente dependiendo de si está solo o si tiene hermanos. Casos comunes:

  • Listas con un solo elemento. Estiliza una lista de un solo elemento de forma diferente (por ejemplo, ocultar una viñeta o eliminar un separador que solo tiene sentido cuando hay varios elementos).
  • Diseños de tarjetas o cuadrículas. Una tarjeta solitaria puede centrarse o estirarse, mientras que dos o más cambian a un diseño de varias columnas.
  • Contenido generado. Cuando el marcado es producido por un CMS o un bucle de plantilla, a menudo no se puede saber de antemano cuántos hermanos aparecerán; :only-child permite que la hoja de estilos reaccione automáticamente a eso.

En qué se diferencia de :only-of-type

Este es el punto de confusión más común:

  • :only-child — coincide solo cuando el elemento es el único hijo de su padre, independientemente del tipo de elemento. Si hay cualquier otro hermano elemento, no coincide.
  • :only-of-type — coincide cuando el elemento es el único de su tipo entre sus hermanos, incluso si existen hermanos de otros tipos.
<div>
  <h2>Heading</h2>
  <p>Only paragraph here</p>
</div>

En el marcado anterior, el <p> no es un :only-child (el <h2> también es un hijo), pero sí es :only-of-type, porque es el único <p>.

El contenido de texto no cuenta

:only-child solo observa los hermanos de tipo elemento. El texto simple alrededor de un elemento no impide que coincida:

<p>Some text <strong>bold</strong> more text</p>

Aquí <strong> sigue coincidiendo con strong:only-child, porque los nodos de texto circundantes no son elementos. Los espacios en blanco y los comentarios también se ignoran.

Versión

Selectors Level 4

Selectors Level 3

Sintaxis

Sintaxis CSS :only-child

:only-child {
  css declarations;
}

Ejemplo del selector :only-child:

Ejemplo de :only-child

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:only-child {
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <div>
      <p>Lorem ipsum is simply dumnmy text.</p>
    </div>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo del selector :only-child para la etiqueta <li>:

Ejemplo de :only-child con la etiqueta li

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul li {
        list-style-type: square;
      }
      li:only-child {
        color: blue;
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <ol>
      <li>
        One element
        <ul>
          <li>This list has just one element.</li>
        </ul>
      </li>
      <li>
        Two elements
        <ul>
          <li>This list has two elements.</li>
          <li>This list has two elements.</li>
        </ul>
      </li>
      <li>
        Three elements
        <ul>
          <li>This list has three elements.</li>
          <li>This list has three elements.</li>
          <li>This list has three elements.</li>
        </ul>
      </li>
    </ol>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo del selector :only-child para la etiqueta <em>:

Ejemplo de :only-child con la etiqueta em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      em:only-child {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <p>This is a <em>paragraph</em>.</p>
    <p>This is a paragraph.</p>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo del selector :only-child para la etiqueta <div>:

Ejemplo de :only-child para la etiqueta div

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:only-child {
        color: #8ebf42;
        font-weight: bold;
      }
      div {
        display: block;
        margin: 6px;
        padding: 5px;
        outline: 1px solid #1c87c9;
      }
      div div {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <div>
      <div>I am an only child.</div>
    </div>
    <div>
      <div>I am the 1st sibling.</div>
      <div>I am the 2nd sibling.</div>
      <div>
        I am the 3rd sibling,
        <div>but this is an only child.</div>
      </div>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Selectores relacionados

  • :only-of-type — el único elemento de su tipo entre los hermanos.
  • :first-child y :last-child — apuntan al primer o último hijo; :only-child es equivalente a combinar ambos.
  • :nth-child() — coincide con hijos por posición usando una fórmula.

Práctica

Práctica
La pseudo-clase :only-child selecciona un elemento
La pseudo-clase :only-child selecciona un elemento
Was this page helpful?