How to make CSS ignore if the attribute is CAPITALIZED or lower case?

Apparently the CSS attribute selector follows the pattern:

[attr operator value i]

Where i is a flag indicating whether it is ascii case insensitive . That is, only characters between a-z and A-Z are case-insensitive . Then

a[href$=".html"]

will work with .html , .HTML , etc. However

a[href$=".fóo"]

will not work with .FÓO and Ó not be part of the ASCII table.

Then, changing your selector to

[href*="html" i]

will work as expected.

Or even [href$="html" i] to marry only at the end of the href.

Edit

As suggested I've been looking at the specs on a standardization if the selector value is case sensitive or not.

After a good walk through various versions and drafts I ended up finding that the flag i in the attribute selector is part of draft selector module , which is a work in progress, its support is not yet complete.

But with the exception of Internet Explorer, Microsoft Edge and Opera Mini , modern browsers already support this feature, as shown in Can I Use .

Seeing version 3 of CSS selectors we have:

  

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

That in free translation means:

  

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

As our document is HTML, in the Case -Sensitivity and Strings Comparison of version 5.2 we have:

  

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

Free translation:

  

Unless otherwise specified, string comparisons must be made in case-sensitive .

And since there is no spec in the current spec, this would explain why it is case-sensitive by default in browsers.

Code working:

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>

Only with CSS do not know if it's possible, but I created a solution using jquery . I do not know if it's what you're looking for, it's just an idea of how it could be done.

I left the code all commented, if in doubt, ask.

$('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><ahref="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>