Idiomas

Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva

Folhas de estilos CSS dicas & truques

Ver index para todas as dicas.

Nesta página:

A pseudoclasse ':target'

Um URL normalmente aponta para uma página. Quando o URL termina em algo como "#algumtexto" ele aponta para um lugar específico da página. Os navegadores, por padrão fazem com que o alvo (o lugar específico da página) seja colocado à vista e se possível posicionado no topo da tela.

O seletor ':target' destina-se a possibilitar a estilização do elemento alvo, normalmente fazendo com que o elemento ganhe algum tipo de destaque na página, chamando a atenção do usuário para si.

Mas, é possível fazer mais do que isso com uso do seletor. Você pode esconder ou mostrar um elemento caso ele seja ou não um alvo. A seguir mostramos o exemplo de um menu com quatro itens, cada um deles lincado a um determinado texto. Inicialmente, nenhum texto é colocado a vista. Cada item do menu é um link para um alvo com um atributo ID diferente (#item1, #item2...) e o alvo será visível somente quando for ativado pelo link.

Experimente clicar os itens do menu e observe o URL do link corrente na barra de endereços do navegador.

Este é o elemento que corresponde ao item 1. Ele não será visível a menos que você clique o link cujo alvo é "#item1".

Se você clicar o item 2, então este elemento será visível.

Este elemento será visível se você clicar o terceiro item do menu. Você pode criar um link apontando para o URL deste link em qualquer lugar da página e até mesmo em outra página que o alvo será o conteúdo do elemento alvo do link.

Veja como funciona. Existem duas partes importantes: a marcação HTML e a propriedade CSS 'display'. A HTML contém os links e os elementos com IDs correspondentes, conforme mostrado a seguir:

<p>
  <a href="#item1">item 1</a>
  <a href="#item2">item 2</a>
  <a href="#item3">item 3</a>
  <a href="#default">clear</a>

<div class="items">
  <p id="item1">... item 1...
  <p id="item2">... item 2...
  <p id="item3">...
  <p id="default"><!-- by default, show no text -->
</div>

Uma declaração de estilos iniciamente esconde todos os parágrafos inseridos nos elementos DIV, e outra declaração sobrescreve a primeira mostrando o parágrafo alvo atual do item do menu clicado, conforme mostrado a seguir:

div.items p {display: none}
div.items p:target {display: block}

Isto é tudo. O exemplo de estilização mostrado pode ser complementado com declarações de cores, margens, bordas, etc., com a finalidade de melhorar a apresentação visual fazendo a interface se parecer com um menu. Consulte o código fonte desta página e examine as declarações CSS do nosso menu exemplo.

Nós usamos o seletor de negação ':not(:target)' com a finalidade de garantir que somente os navegadores que suportam CSS3 esconderão os elementos alvo. Então nossa folha de estilos será conforme mostrado a seguir:

div.items p:not(:target) {display: none}
div.items p:target {display: block}

Interface em abas

Tendo entendido o que foi mostrado anteriormente fica fácil criar uma interface com navegação em abas real: um conjunto de regras CSS destinadas a mostrar conteúdos baseado no clique em um botão e também estilizar o próprio botão.

Veja a seguir um exemplo. Ele não usa a declaração 'display: none', e sim 'z-index'. Querendo saber como funciona consulte o "código fonte" da página…

Tab 1
Alguém poderá contestar argumentando que ...
Tab 2
... 30 linha de CSS é muito código e ...
Tab 3
... que apenas 2 linhas seriam suficientes, mas ...
Default
... funciona!

Agradecimentos

Esta página inspirou-se na ideia original de Daniel Glazman. Consulte a explicação no seu "blog" datada de 9 de janeiro de 2003 e uma demonstração de janeiro de 2013.

Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2017 W3C®

Criado em 6 de fevereiro de 2003;
Atualizado qui 09 nov 2017 04:40:59 UTC

Idiomas

Sobre traduções