diff options
Diffstat (limited to 'files/pt-br/web/css/_colon_target/index.html')
| -rw-r--r-- | files/pt-br/web/css/_colon_target/index.html | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/files/pt-br/web/css/_colon_target/index.html b/files/pt-br/web/css/_colon_target/index.html new file mode 100644 index 0000000000..d96be5ed63 --- /dev/null +++ b/files/pt-br/web/css/_colon_target/index.html @@ -0,0 +1,208 @@ +--- +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"><section id="section2">Exemplo</section></pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<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"><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> +</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"><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></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> |