CSS Attribute Selectors Explained
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.
Now that’ the hot stuff. The examples are great. Expect to see a lot of hits on your Google Analytics reports due to me referencing this post, lol.
This is great stuff and I’ve started to use it on our new site. Lets expand on the external link icon example you posted. How do you conditionally remove the external link if an image is linked?
Your Example to display the offsite image:
I’ve added some exclusions to omit the background image from any instance of absolute linking that might exist throughout the site to our own domain. These work great too.
Now I want to prevent the external link image from displaying next to images that are linked off site. Examples: Logos or Icons that are linked to affiliated resource sites.
HTML:
I’ve tried a few variations as a descendant selector but so far no luck.
Examples that haven’t worked:
What is the correct way to do this?
looks like HTML part didn’t display – here it is
HTML:
Hmm, I’m not sure there is a good solution to your problem using attribute selectors. Your best bet may be to just add a class on the link when you are linking an image.
Too bad – We have dozens of authors adding content to the system. I was looking for a method that accomplished this without requiring an author or approver in our system to touch up the html.
@Dan Wallace-
You can always use JavaScript to accomplish what you are trying to do.