W3docs
pt
Entrar

CSS :last-of-type Pseudo Classe

A pseudo-classe :last-of-type do CSS seleciona o último elemento de seu tipo entre os elementos irmãos. Veja exemplos.

A pseudo-classe CSS :last-of-type seleciona um elemento que é o último elemento de seu tipo entre os filhos de seu pai. "Tipo" aqui significa o nome da tag do elemento — portanto, p:last-of-type corresponde ao último <p> dentro de seu pai, independentemente de quantos outros elementos (divs, títulos, spans) apareçam depois dele.

Esta página aborda o que :last-of-type corresponde, sua sintaxe, como se comporta em diferentes tipos de elementos e — de forma importante — como difere da pseudo-classe de aparência similar :last-child.

A pseudo-classe :last-of-type é equivalente a :nth-last-of-type(1) e seleciona exatamente o mesmo elemento.

Quando utilizá-la

Use :last-of-type quando quiser estilizar o elemento final de uma determinada tag sem depender de sua posição exata. Usos comuns:

  • Remover a margem inferior ou borda do último parágrafo em um card.
  • Estilizar o último item de lista, imagem ou seção em um contêiner que mistura tipos de elementos.
  • Selecionar "o último de seu tipo" quando não é possível garantir que ele também seja o último filho do pai.

Se precisar do elemento que é literalmente o último filho do pai — independentemente do tipo — use :last-child. Veja a comparação abaixo.

Versão

Selectors Level 4

Selectors Level 3

Sintaxe

Sintaxe CSS :last-of-type

:last-of-type {
  css declarations;
}

Exemplo do seletor :last-of-type:

Exemplo de código :last-of-type

<!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>
Experimente Você Mesmo »

Selecionando elementos pai

O seletor também pode ser aplicado a elementos pai.

Informação

O seletor * é implícito quando nenhum seletor de tipo é especificado (por exemplo, *:last-of-type é equivalente a :last-of-type).

No exemplo abaixo, article:last-of-type estiliza o último <article> entre seus irmãos. Note que a pseudo-classe é avaliada por tipo dentro de cada pai: os elementos <em> são agrupados separadamente dos elementos <div> e <b>, então cada tag tem seu próprio "último de tipo".

Exemplo de seleção de elemento pai:

CSS :last-of-type Pseudo Classe

<!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>
Experimente Você Mesmo »

:last-of-type vs :last-child

Os seletores :last-child e :last-of-type parecem semelhantes, mas respondem a perguntas diferentes:

  • :last-child corresponde a um elemento somente se ele for o último filho de seu pai — a posição importa, o tipo não.
  • :last-of-type corresponde ao último elemento de um determinado tipo, mesmo que outros elementos apareçam depois dele.

Portanto, p:last-of-type corresponde ao último <p> mesmo quando um <span> o segue, enquanto p:last-child não corresponderia a esse <p> (porque o <span> é o último filho de fato). No exemplo abaixo, a regra se aplica ao último parágrafo independentemente dos spans, enquanto span:last-child seleciona apenas o span final — que por acaso é o último filho do body.

Exemplo dos seletores CSS :last-of-type e :last-child:

Seletores :last-of-type e :last-child

<!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>
Experimente Você Mesmo »

Pontos de atenção

  • :last-of-type tem escopo por pai: cada elemento pai tem seu próprio "último parágrafo", "último div" e assim por diante.
  • Funciona apenas em tipos de elementos. Não existe um equivalente baseado em classes — .box:last-of-type significa "o último elemento cujo tipo corresponde ao elemento que também possui a classe box," e não "o último elemento com a classe box." Use :last-child combinado com uma classe, ou :nth-last-of-type(), para maior controle.
  • Se um pai tiver apenas um elemento de um determinado tipo, esse único elemento é seu próprio :last-of-type (e :first-of-type).

Seletores relacionados

Prática

Prática
O que a pseudo-classe CSS :last-of-type corresponde?
O que a pseudo-classe CSS :last-of-type corresponde?
Was this page helpful?