CSS :only-of-type Pseudo Class- Learn CSS

El selector :only-of-type coincide con elementos que son el único hijo de su tipo.

p:only-of-type coincide con un párrafo solo si es el único párrafo dentro de su elemento padre.

Los selectores :only-of-type y :only-child tienen similitudes, excepto que el selector :only-child selecciona el elemento si su padre no tiene otros hijos de ningún tipo.

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 »

Práctica

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

':only-of-type' representa un elemento que no tiene hermanos del tipo especificado 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 específicos 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.