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+