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

BCD tables only load in the browser

Veja também