: alvo - CSS-Tricks | CSS Almanac 2025

O :targetpseudo seletor em CSS corresponde quando o hash no URL e o id de um elemento são os mesmos. Por exemplo, se o URL atual for:

https://css-tricks.com/#voters

E isso existia no HTML:

 Content

Este seletor corresponderia a:

:target ( background: yellow; )

E esse sectionelemento teria um fundo amarelo.

Com aquele seletor genérico (correspondendo a qualquer coisa que seja o destino), se a URL mudasse para terminar em #faqe houvesse outro elemento com um ID de faq, esse seletor corresponderia novamente e o #faqelemento teria um fundo amarelo.

Você pode limitá-lo sendo específico sobre quais elementos deseja segmentar, como

#voters:target ( )

Quando você usaria isso?

Uma possibilidade é quando você deseja um estilo com "estados". Quando a página tem um certo hash, ela está nesse estado. Não é tão versátil quanto manipular nomes de classe (uma vez que só pode haver um e só pode estar relacionado a um elemento), mas é semelhante. Qualquer coisa que você poderia fazer a mudança de uma classe para estado mudança que você poderia fazer quando o elemento está em :target. Por exemplo: mude cores, mude posição, mude imagens, esconda / mostre coisas, qualquer coisa.

Eu usaria estas regras básicas para quando :targetfor uma boa escolha:

Quando um “estado” é necessário
Quando o comportamento jump-down / hash-link é aceitável
Quando é aceitável afetar o histórico do navegador

Como você obtém hashes em URLs?

A forma mais comum é clicando em um link que inclui um hash. Pode ser um link interno (mesma página) ou um URL totalmente qualificado que termina com um hash e um valor. Exemplos:

Go To There Go To There

Comportamento de salto

Independentemente de ser um link da mesma página ou não, o comportamento do navegador é rolar a página até que o elemento esteja no topo da página . Ou, tanto quanto possível, se não puder rolar tão longe. É muito importante saber disso, porque significa que explorar esse comportamento “declarado” é um pouco complicado / limitado.

Por exemplo, uma vez eu tentei uma variedade de técnicas para replicar guias CSS funcionais, mas no final decidi que usar o hack da caixa de seleção era uma ideia melhor porque evita os problemas de pular páginas. Ian Hansson, da CSS Science, também tem alguns exemplos de guias. Seu terceiro exemplo usa :target, e elementos absolutamente posicionados ocultos acima do topo da página para evitar o comportamento de salto de página. É inteligente, mas uma solução geral perfeita, porque isso significaria que a página saltaria para cima se as guias estivessem mais para baixo em uma página.

Mais Informações

Artigo aqui sobre CSS-Tricks: On: target
Especificação de nível 4 dos seletores
Uma galeria de imagens simples usando: target (sofre com o salto de página, bom exemplo disso) por Chris Heilmann
Demonstração da técnica de desbotamento amarelo (embora para conteúdo existente, não para conteúdo recém-adicionado) do Web Designer Notebook.
A CSS Target, literalmente, de Caleb Ogden.
CSS: alvo para designs fora da tela
Documentos MDN