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
Ver index para todas as dicas.
Nesta página:
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}
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…
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.
Criado em 6 de fevereiro de 2003;
Atualizado qua 06 jan 2021 05:40:49 UTC