Question

Lets say I have CSS like this:

div.form label input {
      /* some css here */
}

However this will apply to all of my input elements. I want to have another CSS that applies to an input type, so how do I do this? Creating a class won’t work here because it will just be ignored because of this first one.

Use case:

I have 5 text input that I want to style x way and I have 3 text input that I want to style y way.

Answer 1

Use the attribute selector, supported by IE7+, and every other modern browser..

If you want, say, text inputs, use this:

input[type="text"] {
    color: red; /* Or whatever */
}

Inputs of type password would be like this, for example:

input[type="password"] {
    color: blue; /* Or whatever */
}

And so on. It’s not used that often, but should be, to use other attributes and even custom ones. This quirksmode page gives good examples.

---

Here is one of my own:

<div foo="bar"></div>

/* Any `div` element with `foo` having any value */
div[foo]
{
    background: red;
}

/* Any `div` element with `foo` having a specific value (bar) */
div[foo="bar"]
{
    background: green;
}

If we’re applying this to text inputs, you can use their name attribute:

<input type="text" name="username">
<input type="text" name="email">

input[name="username"]
{
    background: blue;
}

input[name="email"]
{
    background: green;
}