質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.40%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

2回答

1533閲覧

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

arin1128

総合スコア3

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2023/11/01 05:16

実現したいこと

親クラス(.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使用。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2023/11/01 05:28

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

回答2

0

ベストアンサー

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

CSS

1<style> 2.oya [class^="ko__cap"], 3.oya [class*=" ko__cap"] 4{color: red;} 5</style> 6<div class="oya"> 7oya 8<div class="ko__cap"> 9ko_cap 10</div> 11<div class="ko__cap_test"> 12先頭がko_cap 13</div> 14<div class="test1 ko__cap_test test2"> 152番目以降の先頭がko_cap 16</div> 17</div>

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

追記

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

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

HTML

1<div class="oya"> 2oya 3<div class="ko__cap RT"> 4ko_cap 5</div> 6</div>

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

投稿2023/11/01 05:28

編集2023/11/01 05:42
yambejp

総合スコア116119

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

arin1128

2023/11/01 06:05

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

0

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

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

投稿2023/11/01 05:44

編集2023/11/01 05:44
maisumakun

総合スコア145747

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2023/11/01 05:52

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

2023/11/01 06:08

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.40%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問