CSS Attribute and Value Selectors

Did you know you could select elements based on not only the name of the attribute they have but also on the value of that attribute? I didn’t, and for about a year now I’ve been using CSS only knowing about classes, and id selection, but lately I’ve been wanting to REALLY learn CSS.

Selecting by attribute:

Let’s say you want to select all the input tags that have the attribute “name” in them.

<input name="email" value="" />

This is what you CSS for that would like like:

input[name]{
/* styles */
}

You are probably thinking this is pretty much useless since almost all inputs have a “name” attribute, and agree with you, so why don’t we get more specific.

Selecting by Attribute and Value:

If you have made several websites you have probably come up with your own naming conventions for tags. In my case, whenever I make a contact form I use name=”email” for the email field. To style this particular field I could give it a class attribute with the value “email”, but why don’t I take advantage of something I’ve already typed so let’s use CSS to style all input tags that have the name attribute with the value “email”

This is how that would look.

input[name=email]{
/* styles */
}

These selectors are pretty cool but they could be better, check out our post on CSS selectors with regular expressions.