CSS - Style a Link Based on Its "Rel" Attribute

CSS - style a link based on its rel attribute?

Felix Kling and thirtydot suggested to use the [att=val] attribute selector (a[rel="external"]). But this will only work if external is the only rel value.

If you want to style links that could have 1 or more rel values, you should use the [att~=val] attribute selector:

a[rel~="external"] (note the tilde character)

An example for such a link could be:

<a href="http://google.com" rel="external nofollow">LINK</a>

---

See http://www.w3.org/TR/css3-selectors/#attribute-representation for the specification.

Are there any use cases for using the HTML5 link rel attribute combination of stylesheet and next?

I believe that example was made up simply to illustrate the point that one can use both an external resource and a hyperlink keyword in the same link tag. From the list of link types, stylesheet seems to be the only external resource type in common use, which is why I guess it was chosen for this example. The next could have very well been prev or any other hyperlink keyword.

possible to style link rel?

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");

Style sheets break with TITLE attribute on link tags?

This appears to be expected behavior. From, for example, the MDN docs

A preferred stylesheet [...] is one that has a value of stylesheet supplied for the rel attribute, and any value at all for the title attribute. Here are two examples:

<link type="text/css" rel="stylesheet" title="Basic styles" href="basic.css" />
<link type="text/css" rel="stylesheet" title="Fish and boats" href="ocean.css" />

According to the HTML 4.01 specification, only one of the preferred stylesheets can be used at a time. Therefore, given the above example, only one of the two preferred stylesheets will be applied to the document. The specification does not supply a procedure to decide which one should be used, so user agents are free to make whatever choice they like.

---

Related Topics