Skip to main content
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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 nome attr 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?

Concordo com o @Anderson, mas tem uma forma sim de pegar todas as classes que começam com determinado nome... Veja abaixo como fazer.

Resumidamente vc vai fazer a seleção pelo atributo class, que tenha dentro do nome qualquer string que contenha "fa-"

[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"></i>
</p>

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-"...

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 nome attr 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-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?

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Concordo com o @Anderson, mas tem uma forma sim de pegar todas as classes que começam com determinado nome... Veja abaixo como fazer.

Resumidamente vc vai fazer a seleção pelo atributo class, que tenha dentro do nome qualquer string que contenha "fa-"

[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"></i>
</p>