View Full Version : Rules for multiple rel attribute values not applied

09-29-2004, 05:47 PM
On my sites, I've got a CSS rule like so:

a[rel=external] { ... apply background image icon to signify that this link will leave the site ...}

Now, if this external link also happens to be, say, a colleague of mine then the markup might look like this:

<a href="foo.com" rel="external colleague">foo</a>

Now(now), ignoring that it is likely a bit superfluous to mark external links as external(The jury is still out for me), what I've experienced is that if the rel attribute simply says "external", the CSS rule above will always be applied. If there are any other values, it does not apply the rule for that or any other value of the rel attribute.

So my question is... wtf? What do I need to know about CSS and/or browser support for this type of thing that I don't currently? Can the attribute selectors only select the whole string of text contained within? I guess I assumed that they behaved in the same way multiple classes work.

09-29-2004, 05:55 PM

Description of this and others like it here:

09-29-2004, 06:01 PM

09-29-2004, 11:31 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">
a[href*="http://"] {
<a href="http://google.com/">External link</a>

09-29-2004, 11:36 PM
Ah, good thinking heme! But we can't be certain that all external resources will be accessed using HTTP. It's most likely this will be the case, yes, but not necessarily.

Too bad CSS doesn't support regular expressions or something...

But I like what you're on to there, I might play with that..

09-30-2004, 12:04 AM
Perhaps I have once again been overthinking this and it is as simple as not specifying rel="external" and using this CSS rule:

a[rel] { ... }

I am trying to think of what other reason you might have a rel value other than to indicate a relationship to a resource outside the current domain... seems like a good approach at a glance...

Haha... well, after changing my stylesheet to reflect that, I remember that WordPress uses the rel attribute to mark permalinks as "bookmark"... so... crud...

09-30-2004, 12:12 AM
I've used http:// on internal links.

I have a wildcard DNS setup on a site I've got going on for a client, and it's accessible via username.domain.com and domain.com. They both take you to the root, but I use PHP/mod_rewrite to extract the username, bounce it off the database, and proceed with that. Internal link so the top-level site need http://, otherwise the username gets sent and weird things happen. http://username.domain.com/contact and http://domain.com/contact are very different pages.

So just giving an example of when a[href*="http://"] would not be of much use.

09-30-2004, 12:25 AM
I think using

a[rel] {...}

to mark my generic external links will work fine, and then rules like

a[rel~=bookmark] {...}

to override it is a smart way to go at this juncture. I'm definitely sick of typing "rel='external'" in blog entries...

09-30-2004, 01:05 AM
Well you could just tell your blog to parse your input.

<a href="..."+>link text</a>

And have the + signify an external link, or something weird like that. Heh. Would save you typing, and the markup would be as clear (rel="external" is pretty clear... Clearer than just rel="", anyway).

Come to think of it, will CSS select an attribute if it's empty? Will have to test that.

09-30-2004, 02:37 AM
owwww... my head is hurting with all the CSS talk I don't understand.
Any recommended additional reading on this topic to help get a better understanding? (please don't say w3c.org... I mean for regular schmoes like me)

09-30-2004, 02:44 AM
Quite honestly I learned most of what I know by reading w3school's CSS reference page. It made me aware of what I could do with CSS, and from there I just played around a lot until I got the hang of things.

You'll find links and tutorials at www.glish.com/css/ , which I think is one of the best sites to visit. www.alistapart.com is fun to read when you've got the jist of things.

09-30-2004, 03:56 AM
Any recommended additional reading on this topic to help get a better understanding?

Hey Rich :) I reckon this will be right up your alley: http://www.westciv.com/style_master/academy/css_tutorial/advanced/
..and this : http://nemesis1.f2o.org/aarchive?id=6
...and to a lesser extent, this: http://htmldog.com/guides/cssadvanced/

I found the first two in a search for advanced css ;)

09-30-2004, 06:13 PM
Aaron: thanks for the links... I actually have a handle on most of their topic material, it's the advanced stuff that's bugging me out...

Andrew: ahhhh, perfect. Thanks for the reading :)

<off-topic>I just noticed I'm now a CF "Addict"... do I get a prize or anything? ;) </off-topic>

09-30-2004, 11:25 PM
Welcome mate :D
Only 700 more posts and they show you the handshake :p

09-30-2004, 11:58 PM
W3Schools follows the same principals as the W3C when you get into the advanced things (such as this). Basically, W3Schools lays down the foundation (W3C doesn't), and then lets you experiment. Once you wish to further your knowledge, you can read the more technologically descriptive things at the W3C site. You really have to know CSS (you cannot simply look at it and say "Okay, I know what it does." without experimenting) as well as have a good vocabulary (or an online dictionary to use) to understand the terms used.