Clase pseudo CSS :first-of-type

La clase pseudo 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.html).

Ejemplo de la clase pseudo CSS :first-of-type

El selector :first-of-type a menudo se compara con :first-child, pero difieren en su alcance. Mientras que :first-child coincide con un elemento según su posición entre todos los hijos independientemente del tipo, :first-of-type solo coincide si es el primero entre hermanos del mismo tipo de elemento. Ambos selectores comparten la misma especificidad CSS.

peligro
A partir de Selectors Level 4, el elemento seleccionado no requiere estrictamente un nodo padre en el DOM para coincidir.

Version

Selectors Level 3

Selectors Level 4

Syntax

Sintaxis de CSS :first-of-type

css

:first-of-type {
  css declarations;
}

Ejemplo del selector :first-of-type:

html

<!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>

Try it Yourself »

Ejemplo del selector :first-of-type con la etiqueta `<article>`:

html

<!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>

Try it Yourself »

Ejemplo del selector :first-of-type con algunas etiquetas HTML:

html

<!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>

Try it Yourself »

Browser Compatibility

Navegador	Versión
Chrome	1.0
Firefox	1.0
Safari	1.0
Edge	12.0
Opera	7.0
IE	9.0

Practice

¿Cuál es la definición y el uso correctos de la clase pseudo CSS :first-of-type?

La clase pseudo CSS :first-of-type representa el primer hermano de su tipo en la lista de hijos de un elemento.La clase pseudo CSS :first-of-type aplica estilo al último hijo de su padre.La clase pseudo CSS :first-of-type ayuda a dar estilo solo al primer hijo de un elemento.La clase pseudo CSS :first-of-type coincide con el primer elemento entre hermanos del mismo tipo.La clase pseudo CSS :first-of-type se puede usar con el estilo de los contenidos de texto.

Clase pseudo CSS :first-of-type ​

Version ​

Syntax ​

Ejemplo del selector :first-of-type: ​

Ejemplo del selector :first-of-type con la etiqueta <article>: ​

Ejemplo del selector :first-of-type con algunas etiquetas HTML: ​

Browser Compatibility ​

Practice ​

Clase pseudo CSS :first-of-type

Version

Syntax

Ejemplo del selector :first-of-type:

Ejemplo del selector :first-of-type con la etiqueta `<article>`:

Ejemplo del selector :first-of-type con algunas etiquetas HTML:

Browser Compatibility

Practice