親エレメント以外のCSSエレメントの選択

Question

親セレクターの外側にあるCSSエレメントを選択したいとします。私はちょうどCSSでそれをすることができますか？以下は私が達成したいの例です：

<p>Register Form</p> 
<div> 
    <p>Full Name :</p> 
    <p><input type='text' name='name' required></p> 
</div> 
<p>Please fill in the box above</p> 

私は入力タイプが空でない場合div後<p>を非表示にする作りたいです。

<style> 
div > p input:required:valid + p { 
    display: none; 
} 
</style> 

Answer 1

悲しいことに、これは純粋なCSSで行うことはできません。以下は、私が試みたが失敗した結果とstyleです。 CSSの要素の親を変更することはできません。子や後続の兄弟だけが変更できます。

子入力が有効/無効であるときに、javadriptで親divのクラスを切り替えてから、CSSを使用して親divの兄弟を変更することができます。