CSS-Selektor mit Bindestrich/dash

Question

Im folgenden Code ich alle Elemente mit einem Klassennamen auswählen möchten, die mit „bg-client“

<span class="bg-client">Lorem ipsum</span> 
<span class="bg-client_a">Lorem ipsum</span> 
<span class="bg-client_b">Lorem ipsum</span> 
<span class="bg-client_c">Lorem ipsum</span> 

Ich habe versucht, dies zu starten, aber es funktioniert nicht

[class^="bg-client"] {} 
[class^="bg\2Dclient"] {} 
[class^="bg\u002Dclient"] {} 

Irgendwelche Hilfe?

Answer 1

fand ich die Antwort ich

ich ^= Selektor dachte jede Klasse in class="" nehmen und prüfen, ob man mit dem Selektor beginnt. Aber ich habe mich getäuscht. Es überprüft den Anfang von class="".

Und tatsächlich sieht mein Code mehr wie folgt aus:

<span class="foo bar bg-client">Lorem ipsum</span> 
<span class="foo bar bg-client_a">Lorem ipsum</span> 
<span class="foo bar bg-client_b">Lorem ipsum</span> 
<span class="foo bar bg-client_c">Lorem ipsum</span> 

Und das funktioniert:

[class^="bg-client"], [class*=" bg-client"] {}