teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

修正

2020/04/27 02:35

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -29,7 +29,8 @@
29
29
  今回関係するのは「~」ですね。
30
30
 
31
31
  こういうときにドキュメントを確認します。
32
- > [一般兄弟結合子](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator)右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。
32
+ > [MDN:CSS: カスケーディングスタイルシート > 一般兄弟結合子](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator)
33
+ 右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。
33
34
  右側のセレクタで選択される要素が、**左側のセレクタで選択される要素より後に表れること**です。(直後である必要はありません)
34
35
  もうひとつが、**これらの要素が同じ親要素(要素)をもつこと**です。
35
36
 

1

修正

2020/04/27 02:35

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -1,6 +1,3 @@
1
- **※いったん途中で投稿しています。**
2
-
3
-
4
1
  もっと分かりやすい指定をすると良いかと思います。
5
2
  例えば背景色
6
3
  ```css
@@ -26,4 +23,17 @@
26
23
  height:200px;
27
24
  }
28
25
 
29
- ```
26
+ ```
27
+
28
+ となると指定の仕方であることが分かると思います。
29
+ 今回関係するのは「~」ですね。
30
+
31
+ こういうときにドキュメントを確認します。
32
+ > [一般兄弟結合子](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator)右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。
33
+ 右側のセレクタで選択される要素が、**左側のセレクタで選択される要素より後に表れること**です。(直後である必要はありません)
34
+ もうひとつが、**これらの要素が同じ親要素(要素)をもつこと**です。
35
+
36
+ 今のHTML構造だとinputの親はpでbuttonの親はspanです。
37
+
38
+ 家系図で言うと、inputの親の兄弟の孫がbuttonなので、連結しようがない、ということになります。
39
+ HTMLの構造変えるか、JavaScriptをなんとか使うしかないのではないでしょうか。