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.
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" />
To achieve what you're actually trying to do is a bit more verbose:
input[type="text"], input[type="password"]
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.
.contact-form input[type="text"], .contact-form input[type="email"] hint the missing .contact-form in second selectorYou are reading it wrong. E[foo~="warning"] will select any element that has warning it a space separated list. Like this: <el foo="test warning etc" />
I tried input{property: ....} and it worked.
For example input{border: 3px solid red;}
