[css/js].class1が読み込まれ?たら.class2を読み込む。みたいなことは可能か

Question

現在、バリデーションに引っかかった時にerror-messageを出力するようにしています。
しかし、inpuの入力欄自体の背景色も変えたいと思っています。

invalidとnoinvalidをinputへ付与してもよいですが、
それだとエラーメッセージが呼び出される前に(ページを読み込んだ直後に)背景色が変わってしまいます。
今回はerror-messageを呼び出した時に、inpuの[textの入力欄背景色も変えるやり方にしみてみたいです。

このやり方は実装可能ですか？

以下html

<div>
<div>
<p>
<input type="text" name="data[test][id]" id="test_id" class="test_class" required="required">
</p>
</div>
<p class="error-message">エラーです。</p>
<div>

代替案？
＝:activeはクリックしている間ですが、クリックしたら変わるという仕様でも問題ありません。そのようなことは可能ですか？調べましたがやはりcssだけでは厳しいように思えました。

Comments

[m.ts10806]

htmlの構成にも依存する

[thyda.eiqau]

具体的なHTMLの構造と、その中のどの要素に何のスタイルを適用したいのか・適用したくないのかをご提示ください。

[退会済みユーザー]

>具体的なHTMLの構造と、その中のどの要素に何のスタイルを適用したいのか・適用したくないのかをご提示ください。
失礼しました。しばしお待ちください。

[m.ts10806]

はじめに指摘したときになぜ追記しなかったのかわからない。回答にだけ飛びついて解決するわけ無いじゃん（エスパーするしかない質問内容なんて全部そんなもん）

[Lhankor_Mhy]

> m.ts10806さん
「回答もしくは繋がりそうな質問にのみ答えます。他は時間の無駄なので一切返しません。」の人なので、言っても無駄です。
むしろ、後からとはいえコードを提示する対応してきたので、驚きです。
やればできるんですね。

[m.ts10806]

Lhankor_Mhyさん
認識しています。
私が最初に提示求めた情報が回答ついたあとになんやかんやその回答者とやり取りした結果必要になって追記されたことは一度や二度ではないので、その部分を指摘しています。
はじめから指摘に応じれば他人と無駄なやり取りなく解決できるのに、それをしない理由が不明。
自ら無駄な時間を生み出してるだけということなんですけどね。

[Lhankor_Mhy]

私の回答も無駄になりましたか。
エスパー能力で要望をほぼくみ取っていた回答だったので残念です。CSSだけで組むならあれしかないと思うけど……

[m.ts10806]

「荒らし」だそうですね。
自分の都合だけ優先したいなら無料の場は向かないというだけの話。サービスのルールもあるのに、荒らし呼ばわりは非常に心外。
他で立てたとて同じスタンスなら指摘されることは同じ。成長しないのも同じ。

Answer 1

バリデーションに引っかかった時にerror-messageを出力する

の処理をするタイミングで、親要素にエラーなのかどうかの情報をもたせてやればいいのでは。

<style>
.item .error-message {
  display: none;
}
.item.invalid input[type="text] {
  background-color: red;
}
.item.invalid .error-message {
  display: initial;
}
</style>

<div class="item">
  <input type="text">
  <p class="error-message">エラーです。</p>
</div>

<script>
const isValidValuedFormItem = inputElement => {
  return Math.random() >= 0.5;
};

[...document.querySelectorAll('div.item')].forEach(div => {
  let className = isValidValuedFormItem(div.querySelector('input'))? 'valid' : 'invalid';
  div.classList.remove('valid', 'invalid');
  div.classList.add(className);
});
</script>

---

invalidとnoinvalidをinputへ付与してもよいですが、

重要なことではないですが、これは普通validとinvalidでは？

Answer 2

CSS単体でご希望の処理を行う方法を存じません。
実務だと個別にCSS当てています。

複雑な条件で動的に処理したい場合はJSで書くことが多いですが、

<style>
  div input:nth-last-child(2) ,
  span.error {
  color: red;
}
</style>

<form class="" action="index.html" method="post">
  <div class="">
    <span class="">入力</span>
    <input type="text">
    <span class="error">エラーが出たよ</span>
  </div>
</form>

ちょっとトリッキーですけど、エラーが出る際にspan要素が増えることを利用し、
inputが後ろから2番目に移動することを利用してこう書く方法もあります。

一応、JS書かなくても良い方法ですが、要素が増えると調整が必要になります。
ご参考まで。

Comments

[退会済みユーザー]

ありがとうございます。
現在、input[type="text"]で指定をしていたんですが、
.class1 , input[type="text"]とするとclass1の方に背景色がついてしまいます。
ご回答の内容だと span.error にのみcssがあたる認識で合ってますか？

[退会済みユーザー]

すみません、勘違いしていました。inputに当てたいのは背景色なんですね？
カンマで区切ると複数の要素に｛｝の中のスタイルを適用できますよという意味になります。
背景色と文字色をそれぞれ別に当てたい場合は別々に書かないとダメです。
あくまでJSを使わなくてすむサンプルコードになります。

<style>
div input:nth-last-child(2) {
background: aliceblue;
}
span.error {
color: red;
}
</style>

[退会済みユーザー]

荒らしが発生したため、別の場所で立てます。
せっかく回答してくださったのに申し訳ありません。
次はもう少し詳しく書きます。何度もコメントさせてしまい失礼しました。

Answer 3

これではだめなんでしょうか？

.class1{color:red;}
.class1,.class2{backgroud-color:blue;}

逆？

Comments

[退会済みユーザー]

ありがとうございます。
現在、input[type="text"]で指定をしていたんですが、
.class1 , input[type="text"]とするとclass1の方に背景色がついてしまいます。
背景色をつけたいのは、inputの入力項目の背景です。

[yambejp]

では逆ですね

<style>
.class1,[type="text"]{color:red;}
[type="text"]{background-Color:blue;}
</style>
<div class="class1">c1</div>
<input type="text" value="c2">

[退会済みユーザー]

コメントいただいた内容で適用しましたが、同じようにspanに背景色がついてしまいました。

[退会済みユーザー]

htmlを追記します。今しばらくお待ちください。すいません。

[退会済みユーザー]

荒らしが発生したため、別の場所で立てます。
せっかく回答してくださったのに申し訳ありません。
次はもう少し詳しく書きます。何度もコメントさせてしまい失礼しました。

Answer 4

今のところ、対応してるブラウザはないです。

:has() - CSS: カスケーディングスタイルシート | MDN

---

HTMLでの出現順序を入れ替えてよいならば、可能です。

サンプル

退会したようですが、質問の変更に合わせて追記

サンプル

<div>
<p class="error-message">エラーです。</p>
<div>
<p>
<input type="text" name="data[test][id]" id="test_id" class="test_class" required="required">
</p>
</div>
</div>

div{
  display: flex;
  flex-flow: reverse;
}
.error-message{background-color:blue;order:1;}
.error-message + div input[type=text]{color:red;}