CSS Attribute Selectors Explained

Posted on April 14, 2007 in Tutorial | 1 Comment »

So, I had played around with CSS attribute selectors a little bit before I went to An Event Apart Boston, but I have a much better grasp of them now. I gave a brief overview in my An Event Apart Boston Summary.

Currently, you really have to do some digging to figure out exactly how to use them, but I hope this article explains them all better.

General Information

Basically, attribute selectors allow you to target elements based on their attributes (i.e. alt, href, title, etc.). In the table below, you can see all the different options for attribute selectors.

[attr]

Whenever the attribute is set. Ex: input[type]

[attr=”val”]

Whenever the attribute equals the specific value. Ex: input[type=”radio”]

[attr~=”val”]

Whenever the attribute equals one of the space separated list of values. Ex: input[type~=”radio checkbox”]

[attr|=”val”]

Whenever the attribute equals a hyphen-separated list of words, beginning with the value. (This one is supposed to be unreliable, and I am a little confused by the specifications, so I am not really sure of how to explain an example.)

[attr*=”val”]

Whenever the attribute contains the value. Ex: a[href*=”.com”]

[attr^=”val”]

Whenever the attribute starts with the value. Ex: a[href^=”http”]

[attr$=”val”]

Whenever the attribute ends with the value. Ex: a[href$=”.pdf”]

Ok, so hopefully the general information makes them a little clearer, and I hope the following examples make them very easy to use.

Examples

Below, I will give an example of each attribute selector and how it can be used.

[attr]

Ok, so say maybe you want to style anchors that have the href attribute set to something. This may help differentiate JavaScript anchors.

The CSS you want to add is like so:

a { text-decoration: underline; }

a[href] {
	border-bottom: 1px dotted #999;
	text-decoration: none;
}

That will remove the underline, and add a grey bottom border to anything that has the href attribute set.

[attr=”val”]

Ok, so maybe you have added a green border to all input elements, but then you don’t want them on radio buttons. So you add the following CSS:

input { border: 1px solid green; }

input[type="radio"] { border: none; }

That will add a green border to all input elements except for radio buttons.

[attr~=”val”]

Use the same example that you want to add a green border to all input elements except for radio buttons, checkboxes, and submit buttons. The CSS you need is:

input { border: 1px solid green; }

input[type~="radio checkbox submit"] { border: none; }

So you get a green border on all input elements except radio buttons, checkboxes, and submit buttons.

[attr*=”val”]

Ok, so maybe you want to add a Google favicon to every link to Google. Add the following (pretending you have a Google favicon):

a[href*="google"] {
	background: url(/images/googleIcon.gif) no-repeat 100% 50%;
	padding-right: 25px;
}

So now any link to Google, http://google.com/analytics, http://google.com/sitemaps, etc. will have the Google favicon.

[attr^=”val”]

Let’s add an external link to all links that start with http

a[href^="http"] {
	background: url(/images/external.gif) no-repeat 100% 50%;
	padding-right: 25px;
}

Now every link that starts with http will have an external link icon.

[attr$=”val”]

Ok, now we should display an icon for any file types that we are linking to: pdf, doc, xls.

a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"] {
	background-position: 100% 50%;
	background-repeat: no-repeat;
	padding-right: 19px;
}

a[href$=".pdf"] { background-image: url(/images/pdf.gif); }
a[href$=".doc"] { background-image: url(/images/doc.gif); }
a[href$=".xls"] { background-image: url(/images/xls.gif); }

This is one of the coolest things for me. No more adding extraneous markup in order to add an icon that shows the file type when linking to a file.

That’s it!

I must say, that this works in all browsers, except IE 6 of course. But if you use the Dean Edwards IE7 Script and include the CSS 3 selectors, it will work. I will eventually give a rundown of how to use that script, because I find the documentation a little hard to read. So I hope everyone enjoys attribute selectors as much as I do.

• Grab the RSS feed of comments for this entry