CSS - ¿estilo de un enlace basado en su atributo "rel"?

Question

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

¿es posible agregar reglas css para rel = "external"?

Answer 1

Félix Kling y thirtydot sugirieron utilizar el selector de atributo [att=val] (a[rel="external"]). Pero esto solo funcionará si external es solorel valor.

Si quieres estilo de enlaces que pueden tener 1 o más rel valores, se debe utilizar el selector [att~=val] atributo:

a[rel~="external"] (tenga en cuenta el carácter tilde)

Un ejemplo de tal relación podría ser :

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

---

Ver http://www.w3.org/TR/css3-selectors/#attribute-representation para la especificación.

Answer 2

Es posible con la attribute selector:

a[rel=external] { 

} 

Nota: Este es selector es not supported in IE6.

Answer 3

Uso del attribute selector:

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

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

Funciona en todos los navegadores modernos, e IE7 +

Answer 4

Posible con *.

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

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