Concordo com o @Anderson, mas tem uma forma sim de pegar todas as classes que começam ou tenha dentro com determinado algum determinado nome ou caractere como por exemplo o "fa-"
... Veja abaixo como fazer.
Resumidamente vc vai fazer a seleção pelo atributo class
usando o operador *
antes do =
, assim toda class que tenha dentro do nome qualquer string que contenha "fa-"
vai ser selecionada.
[attr*=value]
Representa um elemento com um atributo de nomeattr
o qual valor contém ao menos uma ocorrência de value contido na string.
Fonte com a lista completa dos operadores ~ | ^ $ *
e como cada um dele funciona: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Seletor_de_atributos
[class*="fa-"] {
color:red;
font-size:30px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div>
<i class="fab fa-stack-overflow"></i>
</div>
<p>
<i class="fab fa-stack-overflow"><angellist"></i>
</p>
DICA:
Isso [href*="html"]
é diferente disso [href*="HTML"]
O CSS é case sensitive
e para evitar problemas com CamelCase ou Caixa Alta vc coloca no final do seletor a letra i
[attr operator value i]
Adiciona um i
(ou I
) antes do fechamento das chaves {}
, faz com que o valor seja comparado sem levar em conta caixa alta ou caixa baixa(para caracteres dentro da faixa ASCII).
Aqui nessa pergunta tem uns detalhes sobre o assunto: Como fazer com que o CSS ignore se o atributo está com letra MAIÚSCULA ou minúscula?