<http://schema.org/articleBody>
"O CSS est\u00E1 cada vez mais facilitando as coisas. Alguns problemas que eram resolvidos apenas via Javascript j\u00E1 podem ser resolvidos inteiramente com CSS. Obviamente que para alguns browsers temos que usar algum script para conseguir a compatibilidade. Mesmo assim, se for j\u00E1 poss\u00EDvel utilizar as novas maravilhas do CSS 3 e outras compatibilidades que est\u00E3o surgindo do CSS 2.1, fa\u00E7a-o j\u00E1. Voc\u00EA com certeza vai se agradecer um tempo pr\u00F3ximo! ;-) \r\n\r\nUm caso muito comum na produ\u00E7\u00E3o de sites \u00E9 a constru\u00E7\u00E3o de tabs. Todo desenvolvedor j\u00E1 deve ter feito pelo menos uma vez na vida um script de tabs. Com a pseudo-classe :target seus problemas acabaram. \r\n\r\nQuando queremos relacionar um link na pr\u00F3pria p\u00E1gina, utilizamos o recurso de \"\u00E2ncora\". Quando colocamos um link com o valor assim:\r\n\r\n[cc lang=\"html\"]\r\n&lt;a href=\"#nome-da-ancora\"&gt;Link&lt;/a&gt;\r\n[/cc]\r\n\r\nFalamos para o browser que ao clicar no LINK, ele deve encontrar um ponto na p\u00E1gina chamado, nesse exemplo, &lt;strong&gt;nome-da-ancora&lt;/strong&gt;. Ele vai encontrar o elemento na p\u00E1gina que tenha um ID com esse nome e navegar\u00E1 a barra de rolagem at\u00E9 a posi\u00E7\u00E3o deste elemento. Voc\u00EA j\u00E1 deve saber disso e j\u00E1 deve ter visto funcionando.\r\n\r\nCom a pseudo-classe :target isso ganha nova vida. O :target consegue relacionar isso a um objeto de forma que se voc\u00EA estiver criando abas (tabs), ele mostra automaticamente a aba relacionada. Vamos ao exemplo. Primeiro fa\u00E7a um HTML como o abaixo.\r\n\r\n[cc lang=\"html\"]\r\n&lt;ul class=\"itens\"&gt;\r\n\t&lt;li&gt;&lt;a href=\"#aba1\"&gt;Aba 1&lt;/a&gt;&lt;/li&gt;\r\n\t&lt;li&gt;&lt;a href=\"#aba2\"&gt;Aba 2&lt;/a&gt;&lt;/li&gt;\r\n\t&lt;li&gt;&lt;a href=\"#aba3\"&gt;Aba 3&lt;/a&gt;&lt;/li&gt;\r\n&lt;/ul&gt;\r\n&lt;div class=\"aba\"&gt;\r\n\t&lt;div id=\"aba1\"&gt;\r\n\t\tPrimeira Aba\r\n\t&lt;/div&gt;\r\n\t&lt;div id=\"aba2\"&gt;\r\n\t\tPrimeira Aba 2\r\n\t&lt;/div&gt;\r\n\t&lt;div id=\"aba3\"&gt;\r\n\t\tPrimeira Aba 3\r\n\t&lt;/div&gt;\r\n&lt;/div&gt;\r\n[/cc]\r\n\r\nNote um detalhe muito importante: o valor do HREF dos links \u00E9 exatamente o nome do ID dos DIVs referente ao conte\u00FAdo das abas.\r\n\r\nAgora, para formatar e deixar bonitinho:\r\n\r\n[cc lang=\"html\"]\r\n\t* {margin:0; padding:0;}\r\n\tbody {\r\n\t\tfont:13px verdana, arial, tahoma;\r\n\t}\r\n\t\r\n\tul { margin:20px 20px 0; list-style:none;}\r\n\tli {float:left;}\r\n\t.itens a {\r\n\t\tfloat:left;\r\n\t\tborder:1px solid black;\r\n\t\tbackground:gray;\r\n\t\tpadding:5px 15px;\r\n\t\tcolor:#FFF;\r\n\t\ttext-decoration:none;\r\n\t}\r\n\t\r\n\t.itens a:focus {background:red;}\r\n\r\n\t.aba { padding:0 20px;width:400px; clear:both;}\r\n\t.aba div {\r\n\t\tbackground:white;\r\n\t\tborder:1px solid black;\r\n\t\tpadding:10px;\r\n\t\twidth:100%;\r\n\t\tdisplay:none;\r\n\t}\r\n\r\n\t.aba div:first-child {\r\n\t\tdisplay:block;\r\n\t}\r\n\r\n[/cc]\r\n\r\nNote que a \u00FAltima linha est\u00E1 dizendo para que os DIVs referentes \u00E0s tabs fiquem escondidas e que s\u00F3 a primeira apare\u00E7a.\r\n\r\nA coisa toda acontece aqui, com uma linha de c\u00F3digo:\r\n[cc lang=\"html\"]\r\n\t.aba div:target {\r\n\t\tdisplay:block;\r\n\t}\r\n[/cc]\r\n\r\nEssa linha entende o valor do HREF do link, capturando o ID referente ao div que o browser deve mostrar.\r\n\r\n&lt;a href=\"http://tableless.github.com/tableless/aba-target.html\" title=\"Exemplo de pseudo-classe target\"&gt;Veja o exemplo completo aqui&lt;/a&gt;.\r\n"^^<http://www.w3.org/2001/XMLSchema#string>
<http://tableless.com.br/css3-abas-com-a-pseudo-classe-target/>