How to use attribut selector for corresponding class?

Question

<div class="myclass class1"></div>

Simple class selector is to be like this:

.myclass.class1{/*....*/}

But how to select it with attribute selector?

I've tried like this:

.myclass[class^=class]{/*....*/}

But not working!

---

If it was <div class="myclass"><div class="class1"></div></div>:

Then this would work: .myclass [class^=class]{/*....*/}

---

Amazingly this would work: .myclass[class*=class]{/*.....*/} but why not with ^?

---

Yeah I know I can just use [class^=class]{/*....*/} but I need to apply styles only for .myclass.class....

---

working demo with *

not working demo with ^

Answer 1

Try this:

.myclass[class^="myclass class"]{
    color: blue;
}

[attr^=value]
Represents an element with an attribute name of attr and whose value is prefixed by "value"

DEMO