:first-of-type

La pseudo-clase :first-of-type de CSS representa el primer elemento de su tipo entre un grupo de elementos hermanos.

/* Selecciona cualquier <p> que sea el primer elemento
   de este tipo entre sus hermanos */
p:first-of-type {
  color: red;
}

Nota: Como se definiĆ³ originalmente, el elemento seleccionado tenĆ­a que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

Sintaxis

:first-of-type

Ejemplos

DiseƱando el primer pƔrrafo

HTML

<h2>Encabezado</h2>
<p>PƔrrafo 1</p>
<p>PƔrrafo 2</p>

CSS

p:first-of-type {
  color: red;
  font-style: italic;
}

Resultado

Elementos anidados

Este ejemplo muestra cĆ³mo los elementos anidados tambiĆ©n pueden utilizarse. Tenga en cuenta que el selector universal (*) estĆ” implĆ­cito cuando no se escribe un selector simple.

HTML

<article>
  <div>!Este `div` es primero!</div>
  <div>Ā”Este <span>`span` anidado es el primero</span>!</div>
  <div>Ā”Este <em>`em` anidado es el primero</em>, pero este <em>`em` anidado es el Ćŗltimo</em>!</div>
  <div>Ā”Este <span>`span` anidado tiene estilo</span>!</div>
  <b>Ā”Este `b` califica!</b>
  <div>Este es el `div` final.</div>
</article>

CSS

article :first-of-type {
  background-color: pink;
}

Resultado

Especificaciones

EspecificaciĆ³n Estado Comentarios
Selectors Level 4
La definiciĆ³n de ':first-of-type' en esta especificaciĆ³n.
Working Draft Los elementos coincidentes no requieren tener un padre.
Selectors Level 3
La definiciĆ³n de ':first-of-type' en esta especificaciĆ³n.
Recommendation DefiniciĆ³n Inicial.

Compatibilidad con navegadores

BCD tables only load in the browser

Ver tambiƩn