CODEWITHSUNDEEP
csscss-selectors
Chuck
Chuck

Reputation: 656

CSS: Multiple Attribute Selectors

I would like to style form inputs of type "email" and "password", but not anything else. I was imagining something like the following:

input[type="email"][type="password"] {
    ....
}

However, the way attribute selectors work, it appears to interpret this as "input where the type is simultaneously both 'email' and 'password'". What I'm going for is "input where the type is either exactly 'email' or 'password'". Of course, nothing is both of type email and of type password at the same time.

Is it possible to write a CSS rule that or's across multiple different attribute selectors?

For reference, the HTML would look something like:

<form id="login" onsubmit="return fadeaway()">
    <fieldset>
    <input type="email" placeholder="username"/> <br />
    <input type="password" placeholder="password"/> <br />
    </fieldset>
</form>

Upvotes: 18

Views: 10545

Answers (2)

Manse
Manse

Reputation: 38147

use a comma :

input[type="email"],input[type="password"] {
    ....
}

w3 docs on group selectors here

Upvotes: 4

maxedison
maxedison

Reputation: 17553

Just do this:

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

Upvotes: 22

Related Questions