Attribute Selectors

We recently looked at selecting elements by their tag names, their id, their class, and their parents or ancestors. But sometimes you want to select elements by their attributes. Here's how.

Selecting by Attribute Existence

To target an element by the existence of an attribute, place the attribute name in []. See below.
<style type="text/css">
a[href]
{
color:red;
}
</style>
<a href="http://www.google.com">Go to Google</a>
<a name="PlaceMarker"></a>

In the above example, we target only the anchor tag that has an href attribute-one that is a link.

Making an Exact Attribute Match

While we've looked at selecting on attribute existence, what if we want to select on attribute value? See below.
<style type="text/css">
a[href="http://www.google.com"]
{
color:red;
}
</style>
<a href="http://www.google.com">Go to Google</a>
<a href="http://www.yahoo.com">Go to Yahoo</a>