: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

:target

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: .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 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,.7);
  content: "";
  cursor: default;
}

Resultado

Especificações

Especificações Status Comentário
HTML Living Standard
The definition of ':target' in that specification.
Padrão em tempo real Define semântica específica do HTML.
Selectors Level 4
The definition of ':target' in that specification.
Rascunho atual Não há mudanças.
Selectors Level 3
The definition of ':target' in that specification.
Recomendação Definição inicial.
Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:targetChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 1.3WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

Veja também