Selecting the first non-hidden input in a form

Question

I am trying to select the first input in a form that isn't of type="hidden" .

Consider this form:

<form>
  <input type="hidden" name="token" value="ABC123">
  <input type="text" name="username">
  <input type="password" name="password">
</form>

If I wanted to apply a specific style to the username field. I was assuming I could just use this or something like it. However, nothing that I've tried so far has worked.

input:not([type=hidden]):first-child {
  background: orange;
}

I'd even be alright with something like input[type=text]:first-child but that doesn't work either.

Here is the fiddle I used when writing this question.

Answer 1

Your example isn't working because the :first-child pseudo class will only select the element if it is the first child. Since the first non-hidden input element is not the first child, nothing is selected.

---

Based on the HTML that you provided, you could use a combination of selectors to achieve this.

The first selector could be input:not([type="hidden"]):first-of-type in order to select any non-hidden input elements if it is the first of type.

The next selector selects the hidden input element if it is the first of type, then utilizes the adjacent sibling combinator, + , in order to select the next following non-hidden input element:

 input:not([type="hidden"]):first-of-type, input[type="hidden"]:first-of-type + input:not([type="hidden"]) { background: orange; } 

 <form> <input type="hidden" name="token" value="ABC123"> <input type="text" name="username"> <input type="hidden" name="token" value="ABC123"> <input type="password" name="password"> </form> 

Since the :first-of-type pseudo-class selects the first element by its type , it will work even if the first child element is a legend:

 input:not([type="hidden"]):first-of-type, input[type="hidden"]:first-of-type+input:not([type="hidden"]) { background: orange; } 

 <form> <fieldset> <legend>Title</legend> <input type="hidden" name="token" value="ABC123"> <input type="text" name="username"> <input type="hidden" name="token" value="ABC123"> <input type="password" name="password"> </fieldset> </form> 

---

However, since you stated that the hidden input element is always first, then the following selector will suffice:

 input[type="hidden"]:first-of-type + input:not([type="hidden"]) { background: orange; } 

 <form> <input type="hidden" name="token" value="ABC123"> <input type="text" name="username"> <input type="hidden" name="token" value="ABC123"> <input type="password" name="password"> </form> 

But keep in mind that this won't work if there are two consecutive hidden input elements like in the example below. To work around cases like that, you would need to do what the other answer suggested and select all input elements and then override all the following sibling elements using the general sibling combinator, ~ . I would suggest doing that if your HTML varies from any of the examples above.

 input:not([type="hidden"]):first-of-type, input[type="hidden"]:first-of-type+input:not([type="hidden"]) { background: orange; } 

 <p> Example demonstrating that it doesn't work with two consecutive hidden input elements: </p> <form> <fieldset> <legend>Title</legend> <input type="hidden" name="token" value="ABC123"> <input type="hidden" name="token" value="ABC123"> <input type="text" name="username"> <input type="hidden" name="token" value="ABC123"> <input type="password" name="password"> </fieldset> </form> 

Answer 2

So the problem is that that CSS translates to "select the first input child if it's type is not hidden", as the type is hidden, your CSS doesn't apply.

What you instead need to do is make the CSS apply to all inputs which aren't hidden, then turn it off for all siblings that aren't the first (This works for me on Chrome)

 input:not([type="hidden"]) { background: orange; } input:not([type="hidden"]) ~ input:not([type="hidden"]) { background: white; } 

 <form> <input type="hidden" name="token" value="ABC123"> <input type="text" name="username"> <input type="password" name="password"> </form>