Conhecendo a Pseudo-Classe :Target do CSS3

Uma das novidades que está sendo implementada pelo CSS3 é a utilização de novas pseudo-classes mais poderosas, em especial para esse artigo a pseudo-classe :target.

Você ja deve ter trabalhado com âncoras em seus projetos, caso não tenha, âncoras são links que direcionam o usuário para determinado trecho da página através da utilização de ID´s, aplicados ao trecho desejado e ao href do link, e é exatamente nessa âncora que essa pseudo-classe irá trabalha. O :target, ou se trouxermos para o português “Alvo”, determina as propriedades CSS do elemento ao da Âncora, ou seja, ele determina a formatação do elemento que possui o ID informado na âncora.

                    	<body>
                            
                            
                            

Âncora 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Âncora 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</body>
                    	body{font-size:12px; color:#333; font-family:Verdana, Geneva, sans-serif;}
				
                        .nav-tab{width:300px; margin:10px auto 0; overflow:hidden; padding:0;}
                        .nav-tab li{display:block; float:left; margin-right:2px;}
                        .nav-tab li a{padding:0 5px; line-height:25px; color:#333; background:#ccc; text-decoration:none; display:block;}
                        .nav-tab li:hover a{background:#333; color:#fff;}
                        
                        .tabs{width:300px; margin:0 auto; position:relative;}
                        .tab{display:none; width:258px; border:1px solid #ccc; padding:20px; background:#eee; position:absolute;}
                        .tabs div:first-child{display:block; }
                        
                        .tabs .tab:target{display:block; border-color:#333;}
                    

No exemplo utilizei um menu de abas onde existem 2 abas com âncoras, "#ancora1" e "#ancora2", e uma div com a classe "tabs" que envolve 2 divs com seu ID igual a uma âncora das abas. Cada uma dessas divs é escondida e somente a primeira fica visível. E agora entra a mágica, com o :target somente a div com o ID igual a âncora recebe display igual a block e fica visível.

Alguns navegadores ainda não dão suporte para o :target, testei com exito nos seguintes navegadores: Mozilla Firefox 3.6 e 4.0, Google Chrome, Safari e Opera.

Para fazer o download do exemplo, clique aqui.

Espero que tenham gostado da matéria, até a próxima.

voltar