I don't think that should cause you any problem as I just tested with the markup below and it works well...
<div class="block__element--modifier">Hello</div>
div[class^="block__element--"] {
color: red;
}
Also, this ^=
means that the class
name begins with the above string, failing that will result in failure of your selector as well, you may like to use *=
instead which searches for a substring.
So if you have a class
declared before say like
<div class="hello block__element--modifier">Hello</div>
Will fail your selector Demo, so in this case you may like using
div[class*="block__element--"] {
color: red;
}