CSS - style a link based on its "rel" attribute?

Question

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

is it possible to add css rules for rel="external" ?

Answer 1

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.

Answer 2

It is possible with the attribute selector:

a[rel=external] {

}

Note: This is selector is not supported in IE6.

Answer 3

Use the attribute selector:

a[rel="external"] {
    color: red
}

http://jsfiddle.net/thirtydot/yUmJk/

Works in all modern browsers, and IE7+

Answer 4

Possible with *.

// i.e: <a rel="nofollow external foo">
a[rel*="external"] { color:red; }

// you can add target attribute to open them in a new window
so.dom("a[rel*='external']").setAttr("target", "_blank");

Links:
http://github.com/qeremy/so
http://css-tricks.com/attribute-selectors/
http://www.vanseodesign.com/css/attribute-selectors/