CSS multiple input[type] selectors

Question

According to the W3 CSS spec, something like: input[type~="text password"] should select input fields whose type is set to either "text" or "password", but it doesn't work! Did I misinterpret this line?

E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".

CSS spec source, it's the fourth from the bottom in the table.

Answer 1

Yep, you've got it round the wrong way. The selector is to search within a space seperated list.. i.e.

<element attribute="text password" />

you could find using:

element[attribute~="text"]

The benefit of this is that it shouldn't match:

<element attribute="textual password" />

Hope that helps?

To achieve what you're actually trying to do is a bit more verbose:

input[type="text"], input[type="password"]

Answer 2

Just follow this:

html:

<div class="contact-form">         <label for="">Name</label>         <input type="text">          <label for="">Email</label>         <input type="email">          <label for="">Subject</label>         <input type="text">          <label for="">Message</label>         <textarea></textarea>          <input type="submit" value="Send">      </div> 

css:

.contact-form input[type="text"], input[type="email"]{     width:100%;     box-sizing:border-box;     border:1px solid black;     padding:5px;  } .contact-form input[type="submit"]{     display:block;     color:black;     background-color:white;     border:1px solid black;     border-radius:10px;     margin-top:10px;     padding:10px;     cursor:pointer;      margin:auto;     margin-top:20px; } 

I hope you understand it.