Pseudoclase CSS :only-of-type - Learn CSS

La pseudoclase CSS :only-of-type coincide con un elemento que es el único de su tipo de elemento entre los hijos de su padre. "Tipo" aquí hace referencia al nombre de la etiqueta (por ejemplo p, img o h2), no a una clase o ID.

Por tanto, p:only-of-type coincide con un <p> solo si es el único párrafo dentro de su padre, incluso si ese padre también contiene otros elementos como encabezados, listas o imágenes.

Esta página explica cómo funciona :only-of-type, en qué se diferencia de :only-child y cuándo usar cada uno.

Cuándo usarlo

:only-of-type es útil cuando quieres aplicar estilos a un elemento solo cuando aparece solo dentro de su grupo de hermanos del mismo tipo. Casos habituales:

Resaltar un párrafo en una tarjeta solo cuando es el único párrafo que contiene.
Añadir espacio adicional a una lista cuando es la única lista en una sección.
Dar un estilo diferente a una imagen individual en comparación con las imágenes que aparecen en una galería (varias imágenes).

Si el padre obtiene un segundo elemento del mismo tipo, la regla deja de aplicarse automáticamente, sin necesidad de JavaScript ni clases adicionales.

`:only-of-type` vs `:only-child`

Estas dos pseudoclases parecen similares, pero responden a preguntas distintas:

:only-child coincide con un elemento solo si no tiene ningún hermano (es el único hijo del padre, de cualquier tipo).
:only-of-type coincide con un elemento si no tiene hermanos del mismo tipo; los hermanos de otros tipos están permitidos.

Considera este marcado:

<div>
  <h2>Heading</h2>
  <p>Only paragraph.</p>
</div>

Aquí el <p> no es un :only-child (el <h2> es un hermano), pero sí es el :only-of-type de tipo p, por lo que p:only-of-type coincide con él.

Versión

Selectors Level 3

Selectors Level 4

Sintaxis

Sintaxis de CSS :only-of-type

:only-of-type {
  css declarations;
}

Ejemplo del selector :only-of-type:

Ejemplo de código CSS :only-of-type

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:only-of-type {
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:only-of-type selector example</h2>
    <div>
      <p>Lorem ipsum is simply dummy 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 »

En el ejemplo anterior, el primer <div> contiene un único párrafo, por lo que ese párrafo recibe el fondo azul. El segundo <div> contiene dos párrafos, por lo que ninguno coincide con p:only-of-type y permanecen sin estilo.

Mezclar tipos en el mismo padre

Dado que :only-of-type solo cuenta los hermanos del mismo tipo, un padre puede tener varios elementos de tipos distintos y cada tipo "único" seguirá coincidiendo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div :only-of-type {
        color: #1c87c9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>The only heading</h2>
      <p>The only paragraph.</p>
      <span>The only span.</span>
    </div>
  </body>
</html>

Aquí el <h2>, el <p> y el <span> son cada uno el único elemento de su tipo dentro del <div>, por lo que los tres reciben estilos.

Compatibilidad con navegadores

:only-of-type es compatible con todos los navegadores modernos: Chrome, Firefox, Safari, Edge y Opera. Forma parte de Selectors Level 3, por lo que puedes utilizarlo sin alternativas en los navegadores actuales.

Selectores relacionados

:only-child — coincide con un elemento que no tiene hermanos de ningún tipo.
:first-of-type — el primer elemento de su tipo entre los hermanos.
:last-of-type — el último elemento de su tipo entre los hermanos.
:nth-of-type — selecciona elementos de un tipo según su posición.

Práctica

¿Qué representa la pseudoclase ':only-of-type' en CSS?

':only-of-type' representa un elemento que no tiene hermanos del tipo dado dentro de su contenedor padre.':only-of-type' representa un elemento objetivo que es el único hijo de su tipo dentro de su padre.':only-of-type' representa un elemento con un ID o clase determinados dentro de su contenedor padre.':only-of-type' representa un elemento con estilo que es el único hijo de su tipo dentro de su documento.