回答編集履歴
2
修正
test
CHANGED
|
@@ -60,7 +60,9 @@
|
|
|
60
60
|
|
|
61
61
|
こういうときにドキュメントを確認します。
|
|
62
62
|
|
|
63
|
-
> [一般兄弟結合子](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator)
|
|
63
|
+
> [MDN:CSS: カスケーディングスタイルシート > 一般兄弟結合子](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator)
|
|
64
|
+
|
|
65
|
+
右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。
|
|
64
66
|
|
|
65
67
|
右側のセレクタで選択される要素が、**左側のセレクタで選択される要素より後に表れること**です。（直後である必要はありません）
|
|
66
68
|
|
1
修正
test
CHANGED
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
**※いったん途中で投稿しています。**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
1
|
もっと分かりやすい指定をすると良いかと思います。
|
|
8
2
|
|
|
9
3
|
例えば背景色
|
|
@@ -55,3 +49,29 @@
|
|
|
55
49
|
|
|
56
50
|
|
|
57
51
|
```
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
となると指定の仕方であることが分かると思います。
|
|
56
|
+
|
|
57
|
+
今回関係するのは「~」ですね。
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
こういうときにドキュメントを確認します。
|
|
62
|
+
|
|
63
|
+
> [一般兄弟結合子](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator)右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。
|
|
64
|
+
|
|
65
|
+
右側のセレクタで選択される要素が、**左側のセレクタで選択される要素より後に表れること**です。（直後である必要はありません）
|
|
66
|
+
|
|
67
|
+
もうひとつが、**これらの要素が同じ親要素（要素）をもつこと**です。
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
今のHTML構造だとinputの親はpでbuttonの親はspanです。
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
家系図で言うと、inputの親の兄弟の孫がbuttonなので、連結しようがない、ということになります。
|
|
76
|
+
|
|
77
|
+
HTMLの構造変えるか、JavaScriptをなんとか使うしかないのではないでしょうか。
|