Amran Amran - 1 month ago 10
HTML Question

Select CSS Element Outside of Parent Element

I want to select CSS element that are outside of the parent selector. Can I do that with just CSS? Below are the example that I want to achieve:

<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>


I want make the
<p>
after the
div
to be hidden if the input type is not empty. Below are the
style
that I have tried but with failed result:

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

Answer

Sadly this can't be done with pure css. You can't modify parents of elements with css, only children and subsequent siblings.

You could have javascript toggle a class on the parent div when its child input is valid/invalid, and then use CSS to modify the parent div's sibling.