CSS :target Pseudo Classe
A pseudo-classe CSS :target seleciona elementos que são o alvo de um link interno. Saiba mais sobre ela e pratique com exemplos.
A pseudo-classe :target corresponde a um elemento cujo id é igual ao fragmento da URL atual — a parte após o #. Quando você acessa uma URL como page.html#section2, o elemento com id="section2" torna-se o alvo, e :target permite estilizá-lo.
Esta página explica como :target funciona, quando utilizá-lo, suas limitações e quatro padrões práticos que você pode construir sem JavaScript: um destaque na página, um menu com abas, uma caixa modal e um lightbox.
Como funciona o :target
O navegador rastreia um elemento alvo por página — o elemento cujo id corresponde ao fragmento da URL atual. Clicar em um link da mesma página, como <a href="#section2">, atualiza o fragmento, o que:
- rola o elemento correspondente para a visualização, e
- faz esse elemento corresponder a
:target, aplicando os estilos que você definiu para ele.
Como navegar para um fragmento é uma entrada real no histórico, o botão Voltar funciona como "desfazer": ele retorna ao fragmento anterior (ou a nenhum fragmento), de modo que um menu, modal ou lightbox controlado por :target se fecha automaticamente quando o usuário pressiona Voltar.
/* Style the element currently referenced by the URL fragment */
:target {
border: 2px solid #1c87c9;
background-color: #eee;
}Alguns pontos importantes:
- Apenas um elemento pode ser o alvo por vez — o fragmento é um único valor, portanto
:targetestiliza no máximo um elemento na página. - É um seletor com estado. O estado reside na URL, não na marcação ou no JavaScript, o que é exatamente o motivo pelo qual ele pode controlar widgets interativos sem scripts.
- Um
#vazio limpa o alvo. Vincular ahref="#"(ouhref="#nonexistent") remove a correspondência — é assim que os botões "fechar" nos exemplos de modal e lightbox abaixo funcionam.
Quando usar
Use :target quando quiser interatividade leve e sem scripts, naturalmente vinculada à URL:
- Destacar o destino de um link de salto na mesma página (notas de rodapé, entradas de glossário, um índice).
- Widgets de exibir/ocultar — abas, acordeons, modais, lightboxes — onde uma URL compartilhável ou com favoritos é um bônus.
Prefira JavaScript (ou elementos nativos como <details> e <dialog>) quando precisar que o estado aberto não altere a URL, quando for necessário prender o foco para acessibilidade, ou quando vários painéis precisarem estar abertos ao mesmo tempo.
Nota de acessibilidade: como
:targetalterna a visibilidade por meio de navegação, usuários de teclado e leitores de tela movem o foco para o elemento alvo automaticamente — um ponto a seu favor. Porém, ele não pode prender o foco dentro de um modal, por isso, para diálogos reais, o elemento nativo<dialog>é a escolha mais robusta.
:target é uma pseudo-classe como :hover e :focus; para uma visão geral mais ampla dos seletores, consulte CSS Selectors.
Sintaxe
:target {
/* CSS declarations */
}Versão
:target tem amplo suporte em todos os navegadores modernos. Está definido em:
Exemplo: destacar um alvo de salto
Clique em um link e o parágrafo correspondente recebe uma borda e um fundo porque se torna o :target:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
:target {
border: 2px solid #1c87c9;
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:target selector example</h2>
<p>
<a href="#example1">Jump to Paragraph 1</a>
</p>
<p>
<a href="#example2">Jump to Paragraph 2</a>
</p>
<p id="example1">
<strong>Paragraph 1</strong>
</p>
<p id="example2">
<strong>Paragraph 2</strong>
</p>
</body>
</html>Exemplo: um menu com abas
Cada link de aba aponta para um painel oculto. Apenas o painel cujo id corresponde ao fragmento é exibido, de modo que a "aba" visível é a que você clicou por último:
<!DOCTYPE html>
<html>
<head>
<style>
.tab-menu div {
display: none;
background-color: #f5f5f5;
padding: 0 20px 20px;
}
.tab-menu a {
text-decoration: none;
padding: 10px;
margin: 20px 0;
display: inline-block;
}
.tab-menu div:target {
display: block;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<div class="tab-menu">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#php">PHP</a>
<div id="html">
<h2>
<a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
</h2>
<p>HTML-Hyper Text Markup Language
</p>
</div>
<div id="css">
<h2>
<a href="https://www.w3docs.com/learn-css.html">Learn CSS</a>
</h2>
<p>CSS-Cascading Style Sheets
</p>
</div>
<div id="php">
<h2>
<a href="https://www.w3docs.com/learn-php.html">Learn PHP</a>
</h2>
<p>PHP-Hypertext Preprocessor
</p>
</div>
</div>
</body>
</html>Exemplo: uma caixa modal
O .modal fica oculto por padrão e só é exibido quando é o :target. O link "Abrir Modal" define o fragmento como #modal; o botão de fechar leva a #, o que limpa o alvo e oculta o modal novamente:
<!DOCTYPE html>
<html>
<head>
<style>
h1+a {
text-decoration: none;
padding: 10px 20px;
background-color: #8ebf42;
color: #ffffff;
font-family: sans-serif;
}
/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes example {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
/* Add animation (Standard syntax) */
@keyframes example {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
/* The modal's background */
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Display the modal when targeted */
.modal:target {
display: table;
position: absolute;
}
/* The modal box */
.modal-dialog {
display: table-cell;
vertical-align: middle;
}
/* The modal's content */
.modal-dialog .modal-content {
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Add animation */
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 0.5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 0.5s;
}
/* The button used to close the modal */
.closebtn {
text-decoration: none;
float: right;
font-size: 35px;
font-weight: bold;
color: #fff;
}
.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
padding: 2px 16px;
text-align: center;
line-height: 1.6;
}
header {
background-color: #337ab7;
font-size: 25px;
color: white;
}
header h2 {
text-align: left;
}
footer {
background-color: #337ab7;
font-size: 20px;
color: white;
}
footer p {
text-align: right;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<a href="#modal">Open Modal</a>
<div id="modal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<header class="container">
<a href="#" class="closebtn">×</a>
<h2>Header</h2>
</header>
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<footer class="container">
<p>Footer</p>
</footer>
</div>
</div>
</div>
</body>
</html>Há uma pequena diferença entre caixas modais e lightboxes. Um lightbox pode ser fechado clicando na sobreposição escurecida fora do pop-up, enquanto uma caixa modal só é fechada interagindo dentro dela (aqui, o botão de fechar).
Exemplo: um lightbox
O lightbox funciona da mesma forma que o modal, mas uma sobreposição em tela cheia (.close::before) fica atrás do conteúdo e também leva a #, de modo que clicar em qualquer lugar fora da figura fecha o lightbox:
<!DOCTYPE html>
<html>
<head>
<style>
h1+a {
background-color: #8ebf42;
padding: 20px 40px;
color: #ffffff;
text-decoration: none;
font-size: 20px;
margin: 15px 0;
display: inline-block;
}
/* Unopened lightbox */
.lightbox {
display: none;
}
/* Opened lightbox */
.lightbox:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Lightbox content */
.lightbox figcaption {
width: 25rem;
position: relative;
padding: 1.5em;
background-color: #8ebf42;
}
/* Close button */
.lightbox .close {
position: relative;
display: block;
}
.lightbox .close::after {
right: -1rem;
top: -1rem;
width: 2rem;
height: 2rem;
position: absolute;
display: flex;
z-index: 1;
align-items: center;
justify-content: center;
background-color: black;
border-radius: 50%;
color: white;
content: "×";
cursor: pointer;
}
/* Lightbox overlay */
.lightbox .close::before {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, .7);
content: "";
cursor: default;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<a href="#lightbox">Open Lightbox</a>
<div class="lightbox" id="lightbox">
<figure>
<a href="#" class="close"></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem.
</figcaption>
</figure>
</div>
</body>
</html>Seletores relacionados
:hovere:focus— outras pseudo-classes interativas para estilizar estados acionados pelo usuário.:not()— útil para estilizar tudo exceto o alvo atual, por ex..modal:not(:target).:roote:empty— mais pseudo-classes estruturais.- CSS Selectors — uma visão geral completa dos tipos de seletores.