Usando o seletor CSS curinga [duplicado]

Question

Eu tenho um elemento com estilos CSS e um número adicionado aleatoriamente no final da aula:

<div class="menu-523673 control-34689"></div>

Quero usar o seletor css curinga para o segundo elemento assim:

[class^="control-"] {
  color:red;
}

Eu olhei este post para me inspirar.

Acredito que não funcione, porque o elemento está no meio. Existe alguma maneira de eu conseguir esse resultado? Não posso usar o seletor curinga no nome da primeira classe. Tem que ser o segundo.

Answer 1

Você pode usar isso:

[class*=" control-"] {
  color: red;
}

O espaço no início garante que não corresponda a algo como xyzcontrol-34689, apenas algo parecido xyz control-34689.

[class*=" control-"] {
  color: red;
}

<div class="menu-523673 control-34689">Red text</div>

*=pesquisa todo o valor do atributo, em vez de apenas o início, como ^=faria.

Como @DBS observou nos comentários, tudo quebraria se control-fosse a primeira coisa, então provavelmente é melhor:

[class*=" control-"], [class^="control-"] {
  color: red;
}

Isso corresponde a algo que contém contains- qualquer lugar no valor do atributo ou contains-apenas no início do valor do atributo.

[class*=" control-"], [class^="control-"] {
  color: red;
}

<div class="control-34689">Red text</div>
<div class="menu-523673 control-34689">Also red text</div>

Answer 2

Em vez de ^=, você pode usar o *=seletor.

*= O seletor css seleciona elementos cujo valor de atributo css contém a substring.

[class*=" control-"] {
  color: red;
}

<div class="menu-523673 control-34689">Hello</div>