16

Imagine que eu tenha uma situação onde eu precise estilizar vários links da minha página, mas só os links que terminem em .html, porém reparei que ao tentar pegar o atributo href, eu só consigo pegar os que terminam exatamente com .html, se for .HTML ou .Html por exemplo o link não pega o estilo. Eu não gostaria que esse acontecesse, eu quero pegar o link independente se está ou não com letra maiúscula.

Exite alguma forma de corrigir isso? Fazer com que o CSS ignore se o atributo está com letra MAIÚSCULA ou minúscula?

Segue um exemplo do problema:

a {
  display: block;
  padding: 10px;
  transition: all ease-out .2s;
  font-size: 1.5rem;
}

a:hover {
  transform: scale(1.2);
}

[href*="html"] {
  color: green;
}
<a href="pagina.HTML">link terminando em .HTML</a>
<a href="pagina.html">link terminando em .html</a>
<a href="pagina.Html">link terminando em .Html</a>

1
  • 1
    Mais uma vez uma excelente pergunta e mais uma vez aprendi algo novo pesquisando sobre. :) Commented 17/09/2018 às 15:02

2 Respostas 2

19

O seletor CSS de atributos segue o padrão:

[atributo operador valor i]

Onde:

  1. atributo: é o atributo HTML do elemento
  2. operador: é operador utilizado na comparação entre valor e o conteúdo do atributo no elemento. Os operadores podem ser:

    • =: quando valor é exatamente igual ao conteúdo do atributo;

      a[href="#"]{}
      /* Casa com todos os links que `href` sejam exatemente "#" */
      
    • ~=: quando o conteúdo do atributo é uma lista separada por espaços em branco e valor é um elemento desta lista;

      button[class~="is-small"]{}
      /* Casa com:
          <button class="button is-small is-primary"></button>
          <button class="button is-active is-small"></button>
          <button class="is-small button"></button>
          <button class="is-small"></button>
      
         NÃO casa com:
          <button class="is-small-extra"></button>
          <button class="really-is-small"></button>
      */
      
    • |=: quando o conteúdo do atributo é exatamente igual ao valor ou começa com valor seguido de hífen;

      html[lang|="en"]{}
      /* Casa com:
           <html lang="en"></html>
           <html lang="en-US"></html>
           <html lang="en-GB"></html>
      */
      
    • ^=: quando o conteúdo do atributo começa com valor;

      a[href^="#"]{}
      /* Casa com:
           <a href="#">
           <a href="#top">
           <a href="#modal">
      */
      
    • $=: quando o conteúdo do atributo termina com valor;

      a[href$=".html"]{}
      /* Casa com:
           <a href="/index.html">
           <a href="/header.html">
      */
      
    • *=: quando o conteúdo do atributo contém valor como substring;

      a[href*=".htm"]{}
      /* Casa com:
           <a href="/index.html">
           <a href="/page.htm">
           <a href="/abc.htmdef/index.cgi">
      */
      
  1. valor: é uma string que será comparada com o conteúdo do atributo

  2. i: é uma flag opcional que indican se é a comparação será ascii case insensitive (apenas caractéres entre a e z não acentuados serão case insensitive).

Então para casar com qualquer link cujo href termine com .html você faria:

a[href$=".html"]

Porém não funcionará com .Html, .HTML, .HtMl, etc… Para isso basta adicionar a flag i:

a[href$=".html" i]

O exemplo acima casará corretamente com as variações possíveis de caixa alta.

Vale lembra que a regra:

a[href$=".abc" i]

Casará com .ABC, .AbC, mas não funcionará com .Ábc, ou .äBc por ser ascii case insensitive.

[EDIT] A flag s também faz parte da spec e, ao contrário da i, força a comparação a ser ascii case sensitive.


Specs

Após uma boa pesquisa por várias versões e drafts acabei descobrindo que a flag i no seletor de atributos faz parte do draft do módulo de seletores, que por ser um trabalho em andamento, seu suporte ainda não é completo.

Porém, com exceção do Internet Explorer, Microsoft Edge e Opera Mini, os browser modernos já suportam esta feature, como mostrado no Can I Use.

Vendo a versão 3 dos seletores CSS temos:

Attribute values must be CSS identifiers or strings. The case-sensitivity of attribute names and values in selectors depends on the document language.

Que em tradução livre significa:

Valores de atributos devem ser identificadores CSS ou strings. O case-sensitivity dos nomes de atributos e dos valores nos seletores dependem da linguagem do documento.

Como nosso documento é HTML, na sessão de Case-Sensitivity e Comparação de Strings da versão 5.2 temos:

Except where otherwise stated, string comparisons must be performed in a case-sensitive manner.

Em tradução livre:

A menos que especificado o contrário, comparações de strings devem ser feitas de maneira case-sensitive.

E como não há especificação no spec atual, isso explicaria o porquê de ser case-sensitive por padrão nos navegadores.


Código

a {
  display: block;
  padding: 10px;
  transition: all ease-out .2s;
  font-size: 1.5rem;
}

a:hover {
  transform: scale(1.2);
}

[href*="html" i] {
  color: green;
}
<a href="pagina.HTML">link terminando em .HTML</a>
<a href="pagina.html">link terminando em .html</a>
<a href="pagina.Html">link terminando em .Html</a>

5
  • Show, não sabia dessa. Irei deixar minha resposta apenas como alternativa para futuras pesquisas. +1 Commented 17/09/2018 às 15:04
  • Muito bom jovem é isso mesmo! Obrigado pela resposta!
    – hugocsl
    Commented 17/09/2018 às 15:22
  • 1
    Saberia informar se isso é previsto pelo W3C/WHATWG? O único lugar que encontrei sobre foi esta documentação na MDN que também citou. Com isso em mente, sabe se funciona em todos os navegadores da mesma forma? Além disso, a documentação MDN cita que o i funciona apenas para caracteres ASCII, o que seria interessante adicionar na resposta, visto que fóo seria diferente de foo mesmo com o a flag.
    – Woss
    Commented 17/09/2018 às 15:55
  • @AndersonCarlosWoss obrigado pela sugestão. Editei a resposta. Qualquer recomendação é só avisar. Valeu. Commented 17/09/2018 às 18:23
  • Algum motivo específico para o -1? Se puder me informar para eu melhorar a resposta seria útil... Commented 12/11/2018 às 10:58
0

Apenas com CSS não sei se é possível fazer, mas criei uma solução usando jquery. Não sei se é o que estas a buscar, é apenas uma ideia de como poderia ser feito.

Deixei o código todo comentado, caso tenha dúvidas, pergunte.

$('a').each(function(){ //para cada link
   var attr = $(this).attr('href'); //pega o atributo
   var lower = attr.toLowerCase(); // transforma todos em minusculo 
   var html = lower.indexOf('.html'); //pega todos link que contem .html
   
   if(html != -1) { // aplica a todos links que tiverem .html
      $(this).css('color', 'green')
   }   
});
a {
  display: block;
  padding: 10px;
  transition: all ease-out .2s;
  font-size: 1.5rem;
}

a:hover {
  transform: scale(1.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="pagina.HTML">link terminando em .HTML</a>
<a href="pagina.html">link terminando em .html</a>
<a href="pagina.Html">link terminando em .Html</a>
<a href="pagina.Htmlx">link terminando em .Htmlx</a>
<a href="pagina.xml">link terminando em .xml</a>

3
  • 1
    Valeu jovem, mas com CSS resolvi dessa vez
    – hugocsl
    Commented 17/09/2018 às 15:23
  • 1
    Sim... Deixarei a resposta apenas como segunda opção para futuras consultas. Commented 17/09/2018 às 15:25
  • 1
    Você consegue fazer isso apenas com JavaScript vanilla, sem jQuery, de maneira bem simples: jsfiddle.net/acwoss/7nL4qcko/3
    – Woss
    Commented 17/09/2018 às 16:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .