CODEWITHSUNDEEP
htmlcsscss-selectors
milad
milad

Reputation: 1966

"And" some selectors in css

I have a form in html. I want to do something(for example hiding the entire form) If input fields were valid and user clicked on button.

Here is what I do but it doesn't work:

#username:valid#password:valid#Next:active{
    display: none;
}
<form id="login" action="..."  autocomplete="off">
                <fieldset>
                    <legend id="loginLegend">LOGIN:</legend>
          
                    <label for="username" id="usernameLabel">Username:</label><br>
                    <input type="text" id="username" name="username" required class="text username" value=""><br>
          
                    <label for="password" id="passwordLabel"    class="password">Password:</label><br>
                    <input type="password" id="password" name="password" required class="text password"> <br>
          
                    <input type="button" value="Next" id="Next">
                </fieldset>
</form>

I know It can be accomplished by JavaScript but I just wonder if we can do it with pure CSS?

DETAIL: As matter of fact, I don't want to hide the form exactly I want to start an animation over form but I need be sure that user clicked on button and all fields are valid.

Just for simplicity I changed my "animation" to "display: none" because I think I can work out the rest of code on my own.

Upvotes: 0

Views: 61

Answers (2)

Rounin
Rounin

Reputation: 29501

You need the ~ selector.

In CSS, ~ means any subsequent sibling.

Working Example (Version #1):

#username:valid ~ #password:valid ~ #Next:active {
  display: none;
}
<form id="login" action="..."  autocomplete="off">
<fieldset>
<legend id="loginLegend">LOGIN:</legend>
          
<label for="username" id="usernameLabel">Username:</label><br>
<input type="text" id="username" name="username" required class="text username" value=""><br>
<label for="password" id="passwordLabel"    class="password">Password:</label><br>
<input type="password" id="password" name="password" required class="text password"> <br>
<input type="button" value="Next" id="Next">
</fieldset>
</form>

You have stated that you would like to use CSS to make the entire form disappear when the #Next button is clicked. This can't be achieved with conventional CSS (which only has selectors for subsequent siblings and children, not for previous siblings and parents).

But if you were to use a post-processor CSS library like axe then you could use the compound selector:

#username:valid ~ #password:valid ~ #Next:active ^ #login

where ^ is the any ancestor selector.

N.B. The example below only demonstrates a proof-of-concept with the compound selector:

#username ~ #password ~ #Next ^ #login

because the version of axe used in the example does not work with pseudo-classes like :valid and :active.

Working Example (Version #2):

#username ~ #password ~ #Next ^ #login {
  border: 1px solid red;
}
<form id="login" class="login" action="..."  autocomplete="off">
<fieldset>
<legend id="loginLegend">LOGIN:</legend>
          
<label for="username" id="usernameLabel">Username:</label><br>
<input type="text" id="username" name="username" required class="text username" value=""><br>
<label for="password" id="passwordLabel"    class="password">Password:</label><br>
<input type="password" id="password" name="password" required class="text password"> <br>
<input type="button" value="Next" id="Next">
</fieldset>
</form>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

Upvotes: 1

Alex Shink
Alex Shink

Reputation: 328

Without going into details and the reason why you decided to use this solution, the answer is simple: yes, you can. Separate selectors with a comma character.

#username:valid,
#password:valid,
#Next:active {
     display: none;
}

Upvotes: 0

Related Questions