svgと：focusで兄弟コンビネータを使用する

Question

CSSで兄弟コンビネータについて学びましたが、JavaScript操作の一部をCSSに移行しようとしていますが、難しかったです。私は私のSVG画像の色を変更することができるよ

<div class="box"> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="m64 50-4-8h-6v-4c0-1.1-0.9-2-2-2h-18c-1.1 0-2 0.9-2 2v16l2 2h2.536c-0.341 0.588-0.536 1.271-0.536 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.536-2h11.073c-0.341 0.588-0.537 1.271-0.537 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.537-2h2.537v-6zm-10 0v-6h4.146l3 6h-7.146z"/></svg> 
<div><input type="text"></div> 
<div><input type="text"></div> 
<div><input type="text"></div> 
</div> 

：

path{fill:#f00} 

しかし、私は唯一の■は、入力がフォーカスされた場合に色を変更したいと思います。

.box svg path~.box div input:focus{fill:#f00} 

彼らは直接の兄弟ではありませんので、私は同じレベルにそれらをもたらすためにプレフィックスを使用。

私は間違っていますか？

Answer 1

としてはhere言及：

〜コンビネータは、2つのセレクタを分離し、それを共通 親最初に、両方の株が先行する場合にのみ、第二 要素と一致します。

したがって、関係する要素は同じ親を持たなければなりません。これを "同じ祖先"と混同してはいけません。 .boxは、pathおよびinput:focusの祖先ですが、どちらも親ではありません。

このため、通常、右側にCSSの「パス」を指定しないでください。これは、svg内の要素と外側の要素をペアにすることもできないことを意味します。

また、注文は逆になっています。それがまったく動作すると仮定すると、fillはinput:focusに適用されます。

input { 
    display:block; 
} 
.box input:focus ~ svg { 
    fill:#f00; 
} 

<div class="box"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="m64 50-4-8h-6v-4c0-1.1-0.9-2-2-2h-18c-1.1 0-2 0.9-2 2v16l2 2h2.536c-0.341 0.588-0.536 1.271-0.536 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.536-2h11.073c-0.341 0.588-0.537 1.271-0.537 2 0 2.209 1.791 4 4 4s4-1.791 4-4c0-0.729-0.196-1.412-0.537-2h2.537v-6zm-10 0v-6h4.146l3 6h-7.146z"/></svg> 
</div> 

：

それを動作させるために周りのものを移動し、他のいくつかのトリックを活用することが、このような何かを与えます