[scss]前方一致の正規表現が効かない

Question

実現したいこと

親クラス（.oya）内の子クラス（.ko__capで始まる）の文字を赤くしたい。
ko__cap--Rt、ko__cap--Ltなど、子クラスには何種類があり、「ko__cap」ではじまるものに適用したい

前提

発生している問題・エラーメッセージ

文字が赤くならず、color:red;が効いていない

該当のソースコード

.oya [class^="ko__cap"]{color: red;}

試したこと

.oya .ko__cap--Rt{color: red;}
と記述したところ文字が赤くなったので、正規表現の書き方がおかしいのかもしれません。

補足情報（FW/ツールのバージョンなど）

・コンパイルはうまくいっています。
・Googleデベロッパーツールで確認したところ、他のクラスに上書きされていることもなかったです。
・VScode使用。

Comments

[Lhankor_Mhy]

当方で試したところ、ご提示のコードで、問題なく文字が赤くなりました。

Answer 1

具体的にどうやってクラスを指定しているかによるでしょう
複数のクラスを指定する場合はそれなりの表記が必要です

<style>
.oya [class^="ko__cap"],
.oya [class*=" ko__cap"]
{color: red;}
</style>
<div class="oya">
oya
<div class="ko__cap">
ko_cap
</div>
<div class="ko__cap_test">
先頭がko_cap
</div>
<div class="test1 ko__cap_test test2">
2番目以降の先頭がko_cap
</div>
</div>

※空白文字をどこまで対応するかはHTML次第です

追記

クラス名の一部にヒットさせるというのはあまり効率がいいとはいえません

「.oya .ko__cap--Rt{color: red;}」のような想定で「ko__cap」にヒットさせるなら
クラスの付け方で工夫すべきでしょう

<div class="oya">
oya
<div class="ko__cap RT">
ko_cap
</div>
</div>

上記「.ko__cap」にcolor:redを指定し、「.ko__cap.RT」に専用のスタイルシートを設定すれば済む話です

Comments

[arin1128]

無事解決いたしました！ありがとうございます。
おっしゃる通り、複数のクラスが設定されておりました。
複数だと前方一致が意図した通りに働かないこともあるのですね、勉強になりました。
クラスの付け方の工夫方法までありがとうございます。
参考にさせて頂きます。

Answer 2

[class^="ko__cap"]のような書き方は、class="ko__cap___01"のように当該クラスが先頭にあれば適用されますが、class="foo ko__cap___01"のように2番目以降となった場合には効果を持ちません。

クラスを複数つけることを前提とするなら、先頭一致でかけるのは得策ではありません。

Comments

[maisumakun]

あくまで、「classに設定された文字列全体」に対する先頭と解釈されます。

[arin1128]

無事解決いたしました！ありがとうございます。
ご指摘の通り、複数のクラスを設定しており、それが原因で前方一致にひっかかっておりませんでした。正規表現はなかなか思うようにいきませんね。。。
この度は勉強になりました、ありがとうございました！