possible to style link rel?

Question

This is probably a stupid question but I'll chance it anyways...

I've got something like...

<link rel='next' title='a title!' href='http://alink.com' /> 

I'm wondering is it possible for me to style all link rel's with 'next' in an external stylesheet?

Answer 1

Are you sure you're using link right? See the spec here. A <link> tag is only specified in the head of the document and isn't rendered. You might be thinking of anchor (<a/>) tags.

You can specify a CSS attribute selector:

a[rel=next] { color: blue; }

---

Since IE6 doesn't support the attribute selector, you have a couple of options for complete compatibility. You could just hand code the class of the anchor or use JavaScript.

Here's a JavaScript solution using jQuery (similar syntax), but it's probably not the most ideal for just IE6 and below:

$("a[rel=next]").addClass("myRelClass");

Answer 2

I think what you mean is an anchor tag, not a link tag. And if so, then you can use the following CSS

a[rel='next'] { color: red; }
a[rel='prev'] { color: green; }

to style

<a rel='next' title='a title!' href='http://alink.com' >Next</a>
<a rel='prev' title='a title!' href='http://alink.com' >Previous</a> 

Example here.

Answer 3

Just use something like the following in your external CSS file...

link[rel=next] {
   color: red;
}

BTW: You probably mean the HTML-tag <a> e.g. <a href="http://domain.tld">Link</a>

Answer 4

In regular webbrowsers this <link> doesn't have any visible representation, so how could you style it?