:target

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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

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

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

Resultado

Especificações

Specification
HTML
# selector-target
Selectors Level 4
# target-pseudo
Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:target

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também