疑似要素を使って別の要素を変更したいscssで

こんにちは

私は困っています２時間

radioボタン押すとネクストクラスの背景色を変えたい

しかし変わりません

あなたが私を助けるのを待っています

下にコードを書きました。

html
1                       <div class="container">
2                       .
3                       .
4                        <div class="inputs">
5                         <input type="radio">
6                        </div>
7                       .
8                       .
9                       </div>
10
11                       <button class="next">
12                         <p>next</p>
13                       </button>

scss
1                      .container{
2                          .inputs{
3                              input{
4                                 &:checked + .next{
5                                 background-color: green;
6                                 pointer-events: auto;
7                                 }
8                              }
9                           }
10                       }
11
12                      .next {
13                         background-color: transparent;
14                         pointer-events: none;
15                       }

行動規範の内容に同意します

回答1件

ベストアンサー

&:checked + .next{

inputタグと同じ階層にないのでこの指定は不可能です。
CSSには親に登ると言う機能はないので、以下のように変更して見てください。

HTML
1
2                       <div class="container">
3                       .
4                       .
5                        <div class="inputs">
6                         <input type="radio">
7                         <button id="next-button" class="next">
8                           <p>next</p>
9                         </button>
10                        </div>
11                       .
12                       .
13                       </div>
14

css
1
2                      .container{
3                          .inputs{
4                              input{
5                                 &:checked + #next-button {
6                                 background-color: green;
7                                 pointer-events: auto;
8                                 }
9                              }
10                           }
11                       }
12
13                      .next {
14                         background-color: transparent;
15                         pointer-events: none;
16                       }