CSS Pseudo-clase :last-of-type

La pseudo-clase CSS :last-of-type selecciona un elemento que es el último de su tipo en la lista de hijos de su elemento padre.

La pseudo-clase :last-of-type es equivalente a :nth-last-of-type(1) y selecciona exactamente el mismo elemento.

Versión

Nivel de Selectores 4

Nivel de Selectores 3

Sintaxis

Sintaxis de CSS :last-of-type

css

:last-of-type {
  css declarations;
}

Ejemplo del selector `:last-of-type`:

Ejemplo de código :last-of-type

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-of-type {
        background: #8ebf42;
        font-style: italic;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:last-of-type selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>

Try it Yourself »

Selección de elementos padre

El selector también se puede aplicar a elementos padre.

INFO

El selector * se sobreentiende cuando no se especifica un selector de tipo (por ejemplo, *:last-of-type es equivalente a :last-of-type).

Ejemplo de selección de un elemento padre:

Pseudo-clase CSS :last-of-type

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article:last-of-type {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <article>
      <div>This "div" is first.</div>
      <div>This <span>nested "span" is last</span>!</div>
      <div>This <em>nested "em" is first</em>, but this <em>nested "em" is last</em>!</div>
      <b>This "b" qualifies!</b>
      <div>This is the final "div"!</div>
    </article>
  </body>
</html>

Try it Yourself »

Los selectores :last-child y :last-of-type tienen similitudes, pero existe una diferencia entre ellos. :last-child es muy específico y solo coincide con el último hijo del elemento padre, mientras que :last-of-type coincide con la última aparición del elemento especificado.

Ejemplo de selectores CSS `:last-of-type` y `:last-child`:

Selectores :last-of-type y :last-child

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-of-type {
        background: #8ebf42;
        font-style: italic;
        color: #eee;
      }
      span {
        display: block;
      }
      span:last-child {
        background: #8ebf42;
        font-style: italic;
        font-weight: bold;
        color: #eee;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>:last-of-type and :last-child selectors example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </body>
</html>

Try it Yourself »

Práctica

¿Qué representa la pseudo-clase CSS :last-of-type?

La pseudo-clase CSS :last-of-type representa el último elemento de su padre.La pseudo-clase CSS :last-of-type representa el último elemento de su tipo en una colección de hermanos.Esta pseudo-clase solo acepta tipos de elementos, no selectores de clase o ID.La pseudo-clase CSS :last-of-type también se puede usar en conjunción con selectores de clase o ID.La pseudo-clase :last-of-type ayuda a aplicar estilos al último hijo del tipo especificado.

CSS Pseudo-clase :last-of-type ​

Versión ​

Sintaxis ​

Ejemplo del selector :last-of-type: ​

Selección de elementos padre ​

Ejemplo de selección de un elemento padre: ​

Ejemplo de selectores CSS :last-of-type y :last-child: ​

Práctica ​

CSS Pseudo-clase :last-of-type

Versión

Sintaxis

Ejemplo del selector `:last-of-type`:

Selección de elementos padre

Ejemplo de selección de un elemento padre:

Ejemplo de selectores CSS `:last-of-type` y `:last-child`:

Práctica