CSS :first-of-type Pseudoclase
La pseudoclase CSS :first-of-type selecciona el primer elemento de su tipo entre los elementos hermanos. Lee sobre ella y prueba ejemplos.
La pseudoclase CSS :first-of-type selecciona un elemento que es el primero de su tipo entre sus hermanos. Es equivalente a [:nth-of-type(1)](/learn-css/nth-of-type).
El selector cuenta los hermanos por el nombre de su etiqueta HTML, no por clase, atributo o rol. Para cada tipo de elemento distinto dentro de un padre, exactamente un elemento puede coincidir con :first-of-type — el primero de esa etiqueta. Esto significa que un mismo padre puede tener varias coincidencias con :first-of-type al mismo tiempo (una por etiqueta), que es el comportamiento que más sorprende a quienes vienen de :first-child.
:first-of-type vs :first-child
El selector :first-of-type se compara frecuentemente con :first-child, pero difieren en su alcance. Mientras que :first-child coincide con un elemento solo cuando es el primer hijo de su padre independientemente del tipo, :first-of-type coincide con el primer hermano de un tipo determinado incluso cuando otros elementos lo preceden. Ambos selectores comparten la misma especificidad CSS.
Considera este marcado:
<div>
<h2>Heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>p:first-childno coincide con nada — el primer hijo es<h2>, no un<p>.p:first-of-typecoincide con el primer<p>("First paragraph"), porque es el primer párrafo entre sus hermanos.
Usa :first-of-type cuando quieras "el primer encabezado", "la primera lista" o "el primer párrafo" dentro de un contenedor sin importar qué etiquetas lo precedan. Recurre a :first-child solo cuando el elemento deba ser literalmente el hijo inicial.
Cuándo usarlo
Algunos patrones prácticos:
- Dar estilo al párrafo inicial de un artículo sin añadir una clase al marcado.
- Eliminar el margen superior o el borde del primer elemento de un componente repetido (por ejemplo, el primer
<figure>en una galería). - Combinarlo con
:last-of-typepara recortar los bordes exteriores de una pila, o con:nth-of-type()cuando necesitas una posición distinta a la primera.
Si un padre contiene solo un elemento de un tipo, ese elemento es a la vez su :first-of-type y su :only-of-type.
A partir de Selectors Level 4, el elemento seleccionado no requiere estrictamente un nodo padre en el DOM para coincidir.
Versión
Sintaxis
Sintaxis de CSS :first-of-type
:first-of-type {
css declarations;
}Ejemplo del selector :first-of-type:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Ejemplo del selector :first-of-type con la etiqueta <article>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
font-size: 22px;
color: #777777;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<h2>This is a title.</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
</article>
</body>
</html>Ejemplo del selector :first-of-type con algunas etiquetas HTML:
Aquí article:first-of-type coincide solo con el primer <article>, por lo que su fondo oscuro no se aplica al segundo. El selector tiene alcance por padre y por etiqueta, lo que lo hace ideal para dar estilo a la primera instancia de un bloque repetido.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 0;
}
article:first-of-type {
background-color: #777777;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<p>This is a first element!</p>
<p>This <em>nested 'em' is first</em>!</p>
<p>This <strong>nested 'strong' is first</strong>, but this <strong>nested 'strong' is last</strong>!</p>
<p>This <span>nested 'span' gets styled</span>!</p>
<q>This is a 'q' element!</q>
<p>This is a last element.</p>
</article>
<article>
<p>This is a second article.</p>
</article>
</body>
</html>Compatibilidad con navegadores
| Navegador | Versión |
|---|---|
| Chrome | 1.0 |
| Firefox | 1.0 |
| Safari | 1.0 |
| Edge | 12.0 |
| Opera | 7.0 |
| IE | 9.0 |