Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
:first-of-type
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
Lapseudo-clase:first-of-type deCSS representa el primer elemento de su tipo entre un grupo de elementos hermanos.
css
/* 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
Error: could not find syntax for this itemEjemplos
Diseñando el primer párrafo
HTML
html
<h2>Encabezado</h2><p>Párrafo 1</p><p>Párrafo 2</p>CSS
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 elselector universal (*) está implícito cuando no se escribe un selector simple.
HTML
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
css
article :first-of-type { background-color: pink;}Resultado
Especificaciones
| Specification |
|---|
| Selectors Level 4 # first-of-type-pseudo |