同じ要素の中で2つのcss（1つは前方一致指定）を持っている時にstyleを適用したい。

Question

<div class="sec color*"></div>

.sec{
    width: 100%;
    height: 50vh;
    background-color:#ffffff;
}
.color1{
    border:4px solid red;
}
.color2{
    border:4px solid black;
}
.color3{
    border:4px solid blue;
}

とあったとします。
同じ要素のクラスに"sec"と、"color"を前方一致で持つクラスがあった時にスタイルを適用するにはどうしたら良いでしょうか。

この例で言うと、
class="sec"は通常背景色は#ffffffだが、color1、color2、color3いずれかが同じ要素のクラス内に入った時、背景色を#888888;にしたいということです。
colorクラスは一つだけで、123のいずれかが差し替えられるイメージです。
CSSのみで実現は可能でしょうか。

.sec[class^="color"]{
 background-color:#888888;
}

と連結してみましたが、ダメでした。

Answer 1

[xx=yy]形式は文字列で判断するので前方一致だとcolorが先頭にないと反応しません

.sec[class^="color"],.sec[class*=" color"]{
  background-Color:#888888;
}

Comments

[qa-second]

実現したいことがかないました！感謝申し上げます。
同じ要素内のclassの中でも順序が大切なんですね。