回答編集履歴
1
.
answer
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
### `:has()` を使ってもいい場合
|
|
2
2
|
|
|
3
3
|
JavaScriptなしで実現できます。
|
|
4
|
-
対象の `<input>` に `required` 属性を足しておきます。
|
|
4
|
+
対象の [`<input>` に `required` 属性](https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/required)を足しておきます。
|
|
5
5
|
`tr:has(input:invalid)` というセレクタで「文字の入っていない `<input>` を含む `<tr>`」を選択できます。
|
|
6
6
|
|
|
7
7
|
### `:has()` を使えない場合
|
|
8
8
|
|
|
9
9
|
JavaScriptが必要です。
|
|
10
|
-
対象の `<tr>` すべてに対して空の`<input>`を含んでいたら何か
|
|
10
|
+
対象の `<tr>` すべてに対して空の`<input>`を含んでいたら何かクラスを足す、含んでいなかったらそのクラスを外す、という関数を作っておき、その関数をページロード時と対象 `<input>` に変更があったときに呼びます。クラスのかわりに[カスタム属性](https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes)を使ってもよいです。
|
|
11
11
|
|
|
12
|
+
|