css selector element like

Question

Looking for a css selector for custom elements.

<myApp-thing1></myApp-thing1>
<myApp-thing2></myApp-thing2>
<myApp-thing3></myApp-thing3>

I want to apply a css class to any element that starts with <myApp-...> . Is this possible?

Answer 1

No, there's not. Only the attribute selector can do this. The name of the attribute doesn't matter.

[class^="value"] 

This hits:

<div class="value-a"></div>
<div class="value-b"></div>
<div class="value-c"></div>

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 2

What you're suggesting isn't possible, however, what IS possible is this:

<div myApp="thing1">

Then in CSS you can do this:

div[myApp] {
    background-color:pink;
}

You can even target a specific <div> with the myApp attribute by doing this in CSS:

div[myApp="thing1"] {
    background-color:red;
}

Hope this helps!