Estilizando links com seletores CSS

Julio Bitencourt — Thu, 18 Jun 2009 17:58:05 +0000

Aprender a usar os seletores CSS e explorar o seu potencial pode te ajudar a economizar tempo no desenvolvimento de um web site.
Neste artigo você aprenderá a colocar ícones para tipos diferentes de links.

Seletores de atributos e operadores

Os seletores de atributos são escritos entre colchetes “[]“.
Exemplo: a[href='manual.pdf']

Este exemplo é interessante mas não tão útil, pois neste caso o estilo só será aplicado ao link com o atributo href=’manual.pdf’.

Para tornar o uso mais interessante vamos utilizar $ que é um operador que significa “termina com”.
Desta forma podemos criar um seletor para estilizar todos os links para arquivos PDF.
Exemplo: a[href$='.pdf']

Você também pode utilizar o operador ^, que significa “começa com” e o operador * que busca a ocorrência do valor em qualquer parte do atributo.
Complicou? Veja os exemplos:

Busca todos os links que iniciam com ‘http:’
a[href^='http:']
Busca todos os links que iniciam com ‘mailto:’
a[href^='mailto:']

Busca todos os links que contenham a palavra ‘css’
a[href*='css']

Para finalizar veja este exemplo de estilização de links para documentos PDF, MDB e XLS

a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(doc_pdf.png) center left no-repeat;
}
a[href$='.mdb'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(doc_access.png) center left no-repeat;
}
a[href$='.xls'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(doc_excel_table.png) center left no-repeat;
}

Clique aqui para ver o exemplo em funcionamento

Vale lembrar que estes seletores fazem parte do CSS 3. Embora o CSS 3 ainda não esteja totalmente incorporado aos navegadores
os exemplos colocados aqui funcionaram nos browsers mais recentes (IE7, IE8, Firefox3, Chrome e Safari 4).
Em browsers antigos, como o IE6 por exemplo, o ícone simplesmente não aparece o que não causa um prejuízo muito grande a navegação.

Artigo baseado no original http://rafeekphp.wordpress.com/2009/06/11/auto-matic-link-icons/

Referência de seletores CSS 2.1
http://maujor.com/tutorial/seletores_css21_parte1.php

Referência de seletores CSS 3
http://www.w3.org/TR/css3-selectors/

Artigos sobre jQuery, XHTML, CSS e PHP | Julio Bitencourt » xhtml

Estilizando links com seletores CSS

Já que chegou até aqui, que tal ler isto?