:target

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨julho de 2015⁩.

A pseudo-classe CSS :target representa um único elemento (o elemento alvo) com uma id correspondente ao fragmento da URL.

css

/* 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:

html

<section id="section2">Exemplo</section>

Sintaxe

Error: could not find syntax for this item

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

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

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;
}