CSS [attribute^=value] selector for class that doenst appear first?

user_467875 0
Viewed 28

I need to use the attribute and value CSS selector to target a class as it's generated and will change. This works fine:

[class^="class1"] {
  background: gold
}

<p class="class1-gdsgdfgsgd">Hi</p>

However in reality the class that I need to target doesn't come first. Is there a way to target class1-ANYTHING in this situation?

<p class="classA-fuiiiid classB-djfksdjf <!-- Maybe other classes here --> class1-dfgsfggfd">Hi</p>
css
1 Answers

You were there already, you just have to use the regex anywhere(*) for this:

Replace ^ to *:

[class*='class1'] {
    color: red;  
    font-size:30px;
}
<p class="classA-fuiiiid classB-djfksdjf class1-dfgsfggfd">Hi</p>

user_35643590
Related