CODEWITHSUNDEEP
csscss-selectors
Martial
Martial

Reputation: 1562

CSS selector with hyphen/dash

In the code below I want to select all the elements having a class name that start with "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>

I tried this but it doesn't work

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

Any help ?

Upvotes: 0

Views: 3209

Answers (1)

Martial
Martial

Reputation: 1562

I found the answer myself

I thought ^= selector would take each class in class="" and check if one starts with the selector. But I was wrong. It checks the very beginning of class="".

And actually my code looks more like that :

<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>

And this works :

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

Upvotes: 2

Related Questions