CSS: Attribute Selectors

In CSS, we are mostly accustomed to targeting elements based on either IDs or Classes. Another way what is know is Attribute Selectors can also be used for the same purpose. They turn out to be extremely handy in some situations too.  In fact it is worth having a know about them because they add a lot to your web design or development arsenal.

.

.

.

Consider this html markup:

<a href="www.example.com" rel="link" id="myid" class="myclass">I'm a link !!</a>

Normally, you would style the link like this using its id or class like this:

a.myclass
{
  background-color:#ff0000;
}

 /* or */

a#myid
{
  background-color:#ff0000;
}

However, you can style that link using its “rel” attribute too using this attribute selector:

a[rel="link"]
{
  background-color:#ff0000;
}

There is a lot more to attribute selectors discussed below with different situations.

Attributes With Exact Value

In the above example, we targeted hyperlink having exact value “link” for its “rel” attribute. Now consider following html markup:

<a href="www.example.com">I'm a link !!</a>
<a href="www.secondexample.com">I'm a link !!</a>
<a href="www.thirdexample.com">I'm a link !!</a>

Suppose, you wanted to style each of the above link differently, you can do so by specifying exact value for href attribute:

a[href="www.example.com"]
{
  background-color:#ff0000;
}

a[href="www.secondexample.com"]
{
  background-color:#00ff00;
}

a[href="www.thirdexample.com"]
{
  background-color:#0000ff;
}

Further, you can even use that to style form elements like this:

input[type=text]
{
  background-color:#0000ff;
}

input[type=checkbox]
{
  background-color:#0000ff;
}

input[type=radio]
{
  background-color:#0000ff;
}

Attributes Beginning With Certain Value

Sample html markup:

<a href="sample-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “^=” which targets element attribute beginning with specified value:

a[href^="sample"]
{
  background-color:#0000ff;
}

Attributes Ending With Certain Value

Sample html markup:

<a href="sample-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “$=” which targets element attribute ending with specified value:

a[href$=".html"]
{
  background-color:#0000ff;
}

Attributes Containing Certain Value

Sample html markup:

<a href="sample-cool-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “*=” which targets element attribute containing a certain value at any place in it.

a[href*="cool"]
{
  background-color:#0000ff;
}

Attributes Containing Spaces

Sample html markup:

<h1 rel="lorem ipsum">I'm a heading !!</h1

To style the link, we use this attribute selector using “~=” which targets element attribute containing a value separated by space.

h1[rel~="lorem"]
{
  background-color:#0000ff;
}

Attributes Containing Dashes

Sample html markup:

<h1 rel="lorem-ipsum-dolor-sit-amet">I'm a heading !!</h1

To style the link, we use this attribute selector using “|=” which targets element attribute containing a value separated by dash.

h1[rel|="lorem"]
{
  background-color:#0000ff;
}

Matching Multiple Attributes

It’s interesting to know that you can also use multiple attribute selectors in the same selector which matches all specified. Consider this html markup:

<h1 rel="heading" title="Hello There">I'm a heading !!</h1

h1[rel=heading][title*=Hello]
{
  background-color:#0000ff;
}

Matching Specific Attributes

If you wanted to style all links that have “title” attribute set, you do so this way:

a[title]
{
  background-color:#0000ff;
}

Browser Support Information

These attribute selector can work in all modern browsers. They will work in IE7 too but not IE6.