Utilisation du sélecteur CSS générique [duplicate]

Question

J'ai un élément avec des styles CSS et un nombre ajouté au hasard à la fin de la classe:

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

Je veux utiliser le sélecteur css générique pour le deuxième élément comme ceci:

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

J'ai regardé ce post pour l'inspiration.

Cela ne fonctionne pas, je crois, car l'élément est au milieu. Y a-t-il moyen d'atteindre ce résultat? Je ne peux pas utiliser le sélecteur générique sur le premier nom de classe. Ce doit être le deuxième.

Answer 1

Vous pouvez utiliser ceci à la place:

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

L'espace au début garantit qu'il ne correspond pas à quelque chose comme xyzcontrol-34689, seulement à quelque chose comme xyz control-34689.

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

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

*=recherche toute la valeur de l'attribut, au lieu de simplement commencer comme le ^=ferait.

Comme @DBS l'a noté dans les commentaires, tout se briserait si control-c'était la première chose, donc c'est probablement mieux:

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

Cela correspond soit à quelque chose qui contient contains- n'importe où dans la valeur d'attribut, soit contains-uniquement au début de la valeur d'attribut.

[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

Au lieu de ^=, vous pouvez utiliser *=selector.

*= Le sélecteur css sélectionne les éléments dont la valeur d'attribut css contient la sous-chaîne.

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

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