Seletor de atributos

O seletor de atributos combina elementos baseado no valor de um atributo dado.

Vamos ver alguns exemplos:

Links internos, começando com "#"

<style>
	a[href^="#"] {
		background-color: gold;
		color: black;
	}
</style>

<a href="#internal">Links internos, começando com "#"</a>

Links com "example" em qualquer lugar da URL

<style>
	a[href*="example"] {
	  background-color: silver;
	  color: red;
	}
</style>

<a href="http://example.com">Links com "example" em qualquer lugar da URL</a>

<style>
	div[lang] { 
		font-weight: bold;
	} 
</style>

<div lang="xx">Todas divs com um atributo `lang` em negrito.</div>

<style>
	div[lang="pt"] { 
		color: green; 
	} 
</style>

<div lang="pt">Todas divs com um atributo `lang` == "pt".</div>

Saiba mais em:

https://developer.mozilla.org/pt-BR/docs/Web/CSS/Seletor_de_atributos