3

Existem alguma maneira de pegar "parte do nome da classe" no CSS?

Digo isso por conta do exemplo:

<div class="result_itens_id1255454">

Vamos supor que esse id1255454 é randômico, então não teria como eu estilizar essa div especificadamente pois sempre irá mudar (e não tenho controle sobre o backend que monta essa estrutura)

Teria como pegar parte do nome dessa classe?

Por exemplo, div.result_itens_ pra eu poder estilizar o elemento?

2 Respostas 2

4

Você pode até utilizar o seletor ^= do CSS que aplicará o estilo com base no prefixo do valor naquele atributo. Por exemplo, [class^="result_itens_"] irá aplicar o estilo em todos os elementos que a class inicia com o valor result_itens_.

[class^="result_itens_"] {
  width: 100px;
  height: 100px;
  background-color: red;
}
<div class="result_itens_id1255454">

</div>

O problema é quando o elemento possui essa classe, mas não é a primeira no elemento.

[class^="result_itens_"] {
  width: 100px;
  height: 100px;
  background-color: red;
}
<div class="foo result_itens_id1255454">
 Não ficarei vermelho
</div>

Pois agora class inicia com foo, não mais com result_itens_. Há também o seletor *= que é contém um valor.

[class*="result_itens_"] {
  width: 100px;
  height: 100px;
  background-color: red;
}
<div class="foo result_itens_id1255454">
 
</div>

<hr>

<div class="my_result_itens_bla">
 Por que fiquei vermelho?
</div>

Que contorna o problema de não ser a primeira classe no elemento, mas que permite gerar falsos positivos, pois irá aplicar o estilo em todos os elementos que possuírem, de qualquer forma, o valor result_itens_ no atributo class.

2
  • 1
    Um jeito - não muito bonito, mas fazer o que - é usar [class*=" result_itens_"], [class^="result_itens_"] (com um espaço antes de result no caso do *=), assim diminui bastante os falsos positivos (não sei se elimina 100%)
    – hkotsubo
    Commented 24/09/2019 às 16:29
  • @hkotsubo Se o valor após o prefixo não importar acredito que removeria todos os falsos positivos mesmo.
    – Woss
    Commented 24/09/2019 às 16:33
1

Sim, basta você usar:

[class^="result_itens_"]{
   propriedades aqui
}

O seletor ^= irá pegar todos os elementos que possuem a classe iniciada com result_itens_. O sinal ^ significa início.

Irá funcionar em todos os casos onde o elemento possui apenas essa classe, ou, se houver a possibilidade de ter outra (ou outras), essa for a primeira da lista.

3
  • @AndersonCarlosWoss Seria classe inciada mesmo, porque se tiver class="result_itens_123 foo" irá aplicar.
    – Sam
    Commented 24/09/2019 às 16:25
  • @AndersonCarlosWoss Foi isso que eu falei na resposta: "classe iniciada com result_itens_".
    – Sam
    Commented 24/09/2019 às 16:28
  • @AndersonCarlosWoss Ah, entendi o que quis dizer. Troquei a palavra "uma classe" por "a classe" para não dar esse problema de interpretação. :D
    – Sam
    Commented 24/09/2019 às 16:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .