path: root/files/pt-br/web/css/_colon_target/index.html

---
title: ':target'
slug: 'Web/CSS/:target'
translation_of: 'Web/CSS/:target'
---
<div>{{CSSRef}}</div>

<p>A <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <strong><code>:target</code></strong> representa um único elemento (o elemento alvo) com uma {{htmlattrxref("id")}} correspondente ao fragmento da URL.</p>

<pre class="brush: css no-line-numbers notranslate">/* Seleciona um elemento com a ID correspondente ao fragmento da URL */
:target {
  border: 2px solid black;
}</pre>

<p>Por exemplo, a seguinte URL tem um fragmento (denotado pelo sinal de <em>#</em>) que aponta para o elemento chamado <code>section2</code>:</p>

<pre class="notranslate">http://www.example.com/index.html#section2</pre>

<p>O seguinte elemento será selecionado pelo seletor <code>:target</code> quando a URL for igual acima:</p>

<pre class="brush: html notranslate">&lt;section id="section2"&gt;Exemplo&lt;/section&gt;</pre>

<h2 id="Sintaxe">Sintaxe</h2>

{{csssyntax}}

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Índice">Índice</h3>

<p>A pseudo-classe <code>:target</code> pode ser usada para destacar uma parte da página que foi vinculada a partir de um índice.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;h3&gt;Índice&lt;/h3&gt;
&lt;ol&gt;
 &lt;li&gt;&lt;a href="#p1"&gt;Ir para o primeiro parágrafo!&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#p2"&gt;Ir para o segundo parágrafo!&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#vazio"&gt;Esse link não vai pra lugar nenhum,
   pois, o alvo não existe&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;Meu artigo divertido&lt;/h3&gt;
&lt;p id="p1"&gt;Você pode definir &lt;i&gt;este parágrafo&lt;/i&gt; como alvo
   usando um fragmento de URL. Clique no link acima para experimentar!&lt;/p&gt;
&lt;p id="p2"&gt;Esse é &lt;i&gt;outro parágrafo&lt;/i&gt;, também acessável
   pelos links acima. Não é incrível?&lt;/p&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">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;
}</pre>

<h4 id="Resultado">Resultado</h4>

<div>{{EmbedLiveSample('A_table_of_contents', 500, 300)}}</div>

<h3 id="Lightbox_com_CSS_puro">Lightbox com CSS puro</h3>

<p>Você pode usar a pseudo-classe <code>:target</code> 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 <code>display</code> então, assim o conteúdo pode ser mostrado.</p>

<div class="note"><strong>Nota:</strong> Uma lightbox com CSS puro mais completo usando a pseudo-classe <code>:target</code> <a href="https://github.com/madmurphy/takefive.css/">está disponível no GitHub</a> (<a href="https://madmurphy.github.io/takefive.css/">demo</a>).</div>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;ul&gt;
  &lt;li&gt;&lt;a href="#example1"&gt;Abrir exemplo #1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#example2"&gt;Abrir exemplo #2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="lightbox" id="example1"&gt;
  &lt;figure&gt;
    &lt;a href="#" class="close"&gt;&lt;/a&gt;
    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Donec felis enim, placerat id eleifend eu, semper vel sem.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;

&lt;div class="lightbox" id="example2"&gt;
  &lt;figure&gt;
    &lt;a href="#" class="close"&gt;&lt;/a&gt;
    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et,
      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
      Quisque quis neque arcu, nec gravida magna.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">/* 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;
}</pre>

<h4 id="Resultado_2">Resultado</h4>

<div>{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}</div>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificações</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Define semântica específica do HTML.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
   <td>{{Spec2("CSS4 Selectors")}}</td>
   <td>Não há mudanças.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
   <td>{{Spec2("CSS3 Selectors")}}</td>
   <td>Definição inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2>



<div>{{Compat("css.selectors.target")}}</div>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors">Usando a pseudo-classe :target em seletores.</a></li>
</ul>