: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.

Apseudo-classe CSS:target representa um único elemento (o elemento alvo) com umaid 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 chamadosection2:

http://www.example.com/index.html#section2

O seguinte elemento será selecionado pelo seletor:target quando a URL for igual acima:

html

<section>Exemplo</section>

Sintaxe

Error: could not find syntax for this item

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

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>  Você pode definir <i>este parágrafo</i> como alvo usando um fragmento de URL.  Clique no link acima para experimentar!</p><p>  Esse é <i>outro parágrafo</i>, também acessável pelos links acima. Não é  incrível?</p>

CSS

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

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 odisplay então, assim o conteúdo pode ser mostrado.

Nota:Uma lightbox com CSS puro mais completo usando a pseudo-classe:targetestá 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>  <figure>    <a href="#"></a>    <figcaption>      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim,      placerat id eleifend eu, semper vel sem.    </figcaption>  </figure></div><div>  <figure>    <a href="#"></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;}