css matching selector with adjacent class restriction

Question

When I want to match a particular class my-class-b that also has another class my-other-class-a on the same element I can do

.my-class-b.my-other-class-a {
}

Also when I want to match by partial class name I can use

[class^="my-class-"] {
}

Now I want to mix both but it doesn't seem to work. How can I do

[class^="my-class-"].my-other-class-a {
}

Answer 1

This happens because the class attribute is tested for beginning with the specified class in the css selector [class^="abc"].

If the selector is

[class^="my-"]

Then

class="my-class red"

is not the same as

class="red my-class"

Check it out at http://jsfiddle.net/u5sfge94/

One way around this is to specify a new class that acts as [class^="abc"]. It may make your stylesheet a bit more organized, your code more legible and css rendering a tad faster.

Answer 2

Explanation of @juank in a previous answer is correct: the order you write your classes matter, because ^ stands for beginning of value.

But there are many other attribute selectors using regexp notation: ^=, *= and $= in particular; resp. for begins with, anywhere and ends with matching.
If you want your selector to match classes containing my-class wherever it may be, you should use *= (see Snippet 1).
But then it'll also match any class not beginning by my-class but still containing it. To avoid this, you can match as you previously did with ^= and also match [class*=" my-class"] (with a space): it'll take into account the case where it isn't the first class written in the value of the class attribute (see Snippet 2).

Resource: CSS3 Substring Matching Attribute Selectors at CSS3.info (link to REC CSS level 3 Selectors at the very end)

Snippet 1:

[class*='my-class'].my-other-class-a {
  background-color: lightgreen;
}

<div class="my-class-a my-other-class-a">Should match 1</div>
<div class="my-class-b my-other-class-a">Should match 2</div>
<div class="my-other-class-a">Nope</div>
<div class="my-other-class-a my-class-a">Should match 3</div>
<div class="my-other-class-a my-class-b">Should match 4</div>
<div class="whatever my-other-class-a my-class-a">Should match 5</div>
<div class="other my-other-class-a my-class-b">Should match 6</div>
<div class="my-other-class-a maybe-maybe-not-my-class-a">Beware</div>

Snippet 2:

[class^='my-class'].my-other-class-a,
[class*=' my-class'].my-other-class-a {
  background-color: lightgreen;
}

<div class="my-class-a my-other-class-a">Should match 1</div>
<div class="my-class-b my-other-class-a">Should match 2</div>
<div class="my-other-class-a">Nope</div>
<div class="my-other-class-a my-class-a">Should match 3</div>
<div class="my-other-class-a my-class-b">Should match 4</div>
<div class="whatever my-other-class-a my-class-a">Should match 5</div>
<div class="other my-other-class-a my-class-b">Should match 6</div>
<div class="my-other-class-a maybe-maybe-not-my-class-a">Beware</div>