Usando el selector de CSS comodín [duplicado]

Question

Tengo un elemento con estilos CSS y un número agregado aleatoriamente al final de la clase:

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

Quiero usar el selector css comodín para el segundo elemento como este:

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

Miré esta publicación en busca de inspiración.

Creo que no funciona, porque el elemento está en el medio. ¿Hay alguna forma de que pueda lograr este resultado? No puedo usar el selector de comodines en el nombre de la primera clase. Tiene que ser el segundo.

Answer 1

Puedes usar esto en su lugar:

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

El espacio al principio asegura que no coincida con algo como xyzcontrol-34689, solo algo como xyz control-34689.

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

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

*=busca todo el valor del atributo, en lugar de solo el comienzo como lo ^=haría.

Como ha señalado @DBS en los comentarios, todo se rompería si fuera control-lo primero, así que probablemente esto sea mejor:

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

Esto coincide con algo que contenga en contains- cualquier lugar del valor del atributo o contains-solo al comienzo del valor del 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

En lugar de ^=, puede usar *=selector.

*= El selector css selecciona elementos cuyo valor de atributo css contiene la subcadena.

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

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