Seletor de Atributos CSS3 Direcionando o Tipo de Arquivo

Este artigo faz parte do nosso "Série de tutoriais HTML5 / CSS3" - dedicado a ajudar a torná-lo um melhor designer e / ou desenvolvedor. Clique aqui para ver mais artigos da mesma série.

o seletores de atributos é um recurso muito útil para selecionar um elemento sem adicionar supérfluo identidade ou classes. Contanto que o elemento de destino tenha um atributo como href, src e tipo nós não temos que fazer isso.

Os seletores de atributo, na verdade, estão por aí desde CSS 2.1, e agora com mais alguns tipos de seletores de atributos adicionados nas especificações CSS3, podemos direcionar o atributo do elemento ainda mais especificamente.

E, neste post, vamos usar uma das sintaxes para selecionar o tipo de arquivo que é inserido como parte do valor do atributo.

A sintaxe e suporte ao navegador

o tipo de arquivo está sempre no final do nome do arquivo. Então, para selecionar tipo de arquivo podemos usar a seguinte sintaxe [attr $ = "valor"]. Esta sintaxe usa o $ = operador que irá direcionar o final do valor do atributo, por exemplo:

 a [href $ = ". pdf"]: antes de background: url ('… /images/document-pdf-text.png') sem repetição;  

O snippet acima selecionará todos os links com os quais o valor do atributo termina .pdf e insira um ícone de documento de palavra no :antes pseudo-elemento.

Fonte do ícone PDF: Fuga ícones

Embora esta seja uma utilização comum deste seletor, certamente podemos ir além disso.

Em relação à compatibilidade do navegador; Embora esta sintaxe seja oficialmente apresentada como a especificação CSS3, ela tem sido suportada desde Internet Explorer 7, para que você possa aplicá-lo com segurança em todos os seus projetos.

O exemplo

Você nunca saberá, se você nunca tentar. Nós só precisamos tentar algo novo para entender melhor algo que ainda não entendemos. Então, aqui, vamos demonstrar como essa sintaxe pode ser muito útil e útil para segmentar um elemento em uma estrutura HTML específica que costumava ser um pouco difícil de aplicar usando apenas CSS simples.

Abaixo, temos um Estrutura HTML5 para listar três imagens com sua legenda. É apenas para fins de demonstração, sua marcação não precisa ser exatamente igual ao trecho a seguir (por exemplo, você pode ter apenas uma imagem ou até mais três imagens), mas o ponto é saber como essa sintaxe pode ser aplicada uma estrutura HTML específica.

Cada uma das imagens listadas acima tem os seguintes formatos ou extensões, jpg, png, e gif. Eles também têm uma legenda que representa sua extensão de imagem; essa legenda funcionará como o rótulo da imagem.

Então, aqui está o plano, vamos dar cores de fundo diferentes para a legenda para cada extensão de imagem diferente. A imagem JPG terá um verde cor de legenda, o PNG receberá azul, e por último o gif vai ficar roxa.

Primeiro, vamos definir a posição da tag figure relativamente, porque vamos aplicar absoluto posição para a legenda.

 figura posição: relativa;  

Adicione um pouco de decoração para as imagens com bordas e sombras.

 img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, 0,5); box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, 0,5);  

Em seguida, definimos o estilo e o posicionamento padrão para a legenda. A legenda ou o rótulo da imagem terá um quadrado de 50 px.

 img + figcaption cor: #fff; posição: absoluta; top: 0; direita: 0; largura: 50px; altura: 50 px; altura da linha: 50 px; texto-alinhar: centro;  

Agora é hora de adicionar a cor de fundo. Para fazer isso, podemos combinar o seletor de atributos com o seletor irmão adjacente, +.

 img [src $ = ". jpg"] + figcaption cor de fundo: # a8b700;  

O snippet acima segmentará todas as imagens com o atributo de origem terminado em .jpg, então o seletor adjacente encontrará o elemento próximo a ele. Neste caso, o figcaption será adicionado com o # a8b700 cor de fundo.

E aqui estão todos os códigos para o resto dos formatos de imagem, .png e .gif.

 img [src $ = ". png"] + figcaption cor de fundo: # 389abe;  img [src $ = ".gif"] + figcaption background-color: # 8960a7;  

Agora, vamos ver como acontece ao vivo no link de demonstração abaixo, ou então você pode baixar a fonte para examiná-la offline.

• Demonstração
• Fonte de download

As fontes de imagem são as seguintes: MacPro 1, MacPro 2 e MacPro 3

Conclusão

Esperamos que você veja o lado elegante do estilo usando um seletor especial, como o que tentamos demonstrar acima usando o seletor de atributos. Então, da próxima vez que você estiver estilizando seu HTML, recomendamos que você pesquise se o seu estilo pode ser aplicado usando um seletor especial, em vez de arruinar sua marcação estruturada com mais classes ou identidade.

Na verdade, existem mais dois novos seletores desse tipo, os quais abordaremos nos próximos posts, então fique ligado.