How to select with preceded ~ selector

HTML-CSS
1

The input got some divs for responsive. The button tag is the last one but as I try the but the div blocks the following code:

As it have with

<div>
<div>
<input>
</div>
</div>
<button></button>

Then how can select with preceded selector ~ include a div?

input:valid ~ button
{
color: green;
}

input:invalid ~ button
{
color: red;
}

Thanks!

2

Try to research but there is value result. May be include div before ~ and set after button?

3

Do you have a fiddle or pen we can see to help you? I also can’t understand your question. Your selectors seem to be trying to select the button that is preceded by a SIBLING input that is valid or invalid and color them accordingly. The ~ selector only works for sibling elements, not “great-aunts” as the button is to the input.

https://www.w3schools.com/cssref/css_selectors.asp

4

try: div>div>input:valid ~ button?