Selecionando pelo final de um atributo com CSS

Olá a todos, nesse tutorial veremos uma variação de um seletor CSS que conheci recentemente, e que achei muito útil para utilizar em diversas aplicações nos projetos.

Enquanto o seletor por atributos busca valores inteiros, essa variação seleciona um elemento através do final do valor de um atributo, por exemplo: em uma lista de downloads temos diversos elementos <li> com seus respectivos elementos <a>, mas como identificar qual o tipo de arquivo que cada <a> referencia para mudarmos seu ícone de acordo com a extensão do mesmo? Utilizando a sintaxe abaixo:

Elemento[atributo=”valor”]{..código CSS..} - Sintaxe para seleção por atributo

Elemento[atributo$=”final_do_valor”]{..código CSS..} - Sintaxe para seleção pelo final de um atributo

Nesse exemplo identificamos a extensão do arquivo e alteramos o ícone dele, mas uma vez entendido como o seletor funciona você pode aplica-lo em diversas outras situações, com a vantagem de deixar seu código fonte mais limpo, uma vez que não precisamos escrever uma classe para cada tipo de ícone.

                    	
                    
                    	.lista-download li{float:left; display:block; margin-left:15px;}
                        .lista-download li a{padding-left: 35px; height:32px; line-height:32px; display:block; text-decoration:none; color:#333; font-family:Verdana, Geneva, sans-serif;}
                        .lista-download li a:hover{text-decoration:underline;}
                        .lista-download li a[href$=".pdf"]{background:url(icone_pdf.png) top left no-repeat;}
                        .lista-download li a[href$=".doc"]{background:url(icone_doc.png) top left no-repeat;}
                    

Para fazer o download do exemplo, clique aqui.

Espero que tenham gostado do seletor, até a próxima.

voltar