O seletor CSS de atributos segue o padrão:
[atributo operador valor i]
Onde:
atributo
: é o atributo HTML do elemento
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">
*/
valor
: é uma string que será comparada com o conteúdo do atributo
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>