Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

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.

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

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.