: único de tipo - Trucos CSS

Tabla de contenido

El :only-of-typeselector de pseudoclase en CSS representa cualquier elemento que no tenga hermanos del tipo dado.

p:only-of-type ( color: red; )

Si ninguna etiqueta precede al selector, coincidirá con cualquier etiqueta (p :only-of-type. Ej .). Si otro selector lo precede, coincidirá en función del tipo de etiqueta que el selector coincide. Por ejemplo, .example:only-of-typese comportará como p:only-of-typesi .examplese aplicara a un elemento de párrafo.

Ejemplo simple

Una lista contiene solo un elemento de lista. Otra lista contiene tres elementos de lista. Podemos apuntar al elemento de la lista que está solo con :only-of-type.

¡Mira este bolígrafo!

Aunque quizás ese no sea el mejor ejemplo, porque :only-childfuncionaría igual de bien ya que los elementos de la lista son los únicos hijos posibles de las listas. Si usamos divs en su lugar, podríamos apuntar a un párrafo dentro de un div si es el único párrafo, a pesar de que también hay otros elementos allí.

¡Mira este bolígrafo!

Notar

Aparte de la diversión, puede lograr la misma selección que :only-of-typecon :first-of-type:last-of-typeo :nth-of-type(1):nth-last-of-type(1). Sin embargo, esos usan dos selectores encadenados, lo que significa que la especificidad es el doble que la de :only-of-type.

Soporte del navegador

Cromo Safari Firefox Ópera ES DECIR Androide iOS
Alguna Alguna Alguna Alguna IE9 + Alguna Alguna

Articulos interesantes...