Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

Este documento é uma tradução de português (Europeu) do documento Inglês oficial.:
https://www.w3.org/Style/Examples/007/target.html. Esta tradução foi proporcionada por Elisa Maria e pode conter alguns erros. Para eliminar dúvidas por favor consulte a versão oficial deste documento em Inglês. Versão de Português (Europeu):http://www.internetbootcamp.net/007/target.html
Pigeon Forge Cabin For Sale Smoky Mountain Cabins For Sale Homes for Sale in Tarpon Springs

(This page uses CSS style sheets)

:Selecionador target

Elemento com tabela

Agradecimento

O ':target' pseudo - Classe

Um URL normalmente aponta para uma página. Mas quando o URL termina em "# something" este aponta para um elemento específico nessa página. Os navegadores tentam certificar-se de que o elemento alvo está visível e se possível, no topo do ecrã.

Com o selecionador ': target' pode adiccionar um estilo especifico para o elemento alvo recebe mais atenção.

Mas pode fazer mais. Pode esconder ou exibir elementos baseados sem saber se são o alvo ou não. Em baixo está um exemplo. Mostra um pequeno menu com 4 items e cada item está ligado a um texto. Mas no ínicio nenhum texto é visível. Cada item é uma ligaçao a um elemento com um ID alvo (#item1,#item2...) e esses elementos são apenas visiveis quando eles são o alvo do actual URL.

Tenta clicar nos items do menu e vê também na barra de localização do navegador para ver o URL actual.

Este é o elemento que corresponde ao 1 item. Não deve ser visível, a não ser que especifiques uma ligação que expecifique o ''#1item''

Se tu saltares para o 2 item, então este elemento deve ser visível.

Este elemento é visível se tu clicres no terceiro item do menu. O elemento tem um URL que podes onde quiseres. Podes colocar no página Web e saltar directamente para este item.

Aqui está como funciona. Existem duas partes importantes, A fonte HTML e a propriedade exibir. Primeiro o documento HTML. Tem algumas ligações e elementos que correspondem aos ids:

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

A regra do estilo primeiro esconde todos os Ps dentro do DIV, mas depois sobrepõe o P como o alvo actual:

div.items p {display: none}

div.items p:target {display: block}

É tudo. O exemplo em cima é para adiccionar cores, margens, etc.. por isso parece mais um menu. Pode ver na fonte desta página como pode ser feita.

Na verdade, adiccionamos ':not(:target)' para assegurar que apenas navegadores CSS3 irão esconder o elemento. As melhores regras são estás:

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

div.items p:target {display: block}

A interface com tabela

Assim que percebas as explicações em cima, não é dificil fazeres esperiências e criar uma interface com tabela: uma série de regras que não mostram apenas conteudos diferentes baseados em que botões foram precionados, mas também mudanças na aparência do próprio botão.

Aqui está um exemplo. Não usa o 'display:none' mas 'z-index'. Sequiseres saber como funciona, faz apenas ''view source''...

Tab 1
Alguém pode duvidar, que...
Tab 2
... 30 linhas de CSS é muito, e...
Tab 3
... Esses 2 devem de ser o suficiente, mas...
Default
... Funciona!

Agradecimento

Esta página é baseada na ideia original de Daniel Glazman. Ver a explicação no seu ''blog'' em Janeiro 9, 2003 e na sua demostração de Janeiro 13.

CSS Valid CSS!

Bert Bos
criado em 17 de Janeiro de 2001;
Última actualização $Data: 2009/02/03 14:39:10 $GMT