:target
A pseudo-classe CSS :target
representa um único elemento (o elemento alvo) com uma id
correspondente ao fragmento da URL.
/* Seleciona um elemento com a ID correspondente ao fragmento da URL */
:target {
border: 2px solid black;
}
Por exemplo, a seguinte URL tem um fragmento (denotado pelo sinal de #) que aponta para o elemento chamado section2
:
http://www.example.com/index.html#section2
O seguinte elemento será selecionado pelo seletor :target
quando a URL for igual acima:
<section id="section2">Exemplo</section>
Sintaxe
Exemplos
Índice
A pseudo-classe :target
pode ser usada para destacar uma parte da página que foi vinculada a partir de um índice.
HTML
<h3>Índice</h3>
<ol>
<li><a href="#p1">Ir para o primeiro parágrafo!</a></li>
<li><a href="#p2">Ir para o segundo parágrafo!</a></li>
<li>
<a href="#vazio"
>Esse link não vai pra lugar nenhum, pois, o alvo não existe</a
>
</li>
</ol>
<h3>Meu artigo divertido</h3>
<p id="p1">
Você pode definir <i>este parágrafo</i> como alvo usando um fragmento de URL.
Clique no link acima para experimentar!
</p>
<p id="p2">
Esse é <i>outro parágrafo</i>, também acessável pelos links acima. Não é
incrível?
</p>
CSS
p:target {
background-color: gold;
}
/* Adicione o pseudo-elemento dentro do elemento alvo */
p:target::before {
font: 70% sans-serif;
content: "►";
color: limegreen;
margin-right: 0.25em;
}
/* Estilize nos elementos em itálico dentro do elemento alvo */
p:target i {
color: red;
}
Resultado
Lightbox com CSS puro
Você pode usar a pseudo-classe :target
para criar uma lightbox sem usar JavaScript. Essa técnica requer que os links apontem para os elementos que inicialmente estavam escondidas na página. Uma vez designado, o CSS muda o display
então, assim o conteúdo pode ser mostrado.
Nota: Uma lightbox com CSS puro mais completo usando a pseudo-classe :target
está disponível no GitHub (demo).
HTML
<ul>
<li><a href="#example1">Abrir exemplo #1</a></li>
<li><a href="#example2">Abrir exemplo #2</a></li>
</ul>
<div class="lightbox" id="example1">
<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>
<div class="lightbox" id="example2">
<figure>
<a href="#" class="close"></a>
<figcaption>
Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam
quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna.
</figcaption>
</figure>
</div>
CSS
/* Lightbox fechado */
.lightbox {
display: none;
}
/* Lightbox aberto */
.lightbox:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Conteúdo da lightbox */
.lightbox figcaption {
width: 25rem;
position: relative;
padding: 1.5em;
background-color: lightpink;
}
/* Botão fechar */
.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, 0.7);
content: "";
cursor: default;
}
Resultado
Especificações
Specification |
---|
HTML Standard # selector-target |
Selectors Level 4 # the-target-pseudo |
Navegadores compatíveis
BCD tables only load in the browser