web-dev-qa-db-fra.com

CSS - style un lien basé sur son attribut "rel"?

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

est-il possible d'ajouter des règles css pour rel = "external"?

csshyperlink
26
Alex

Felix Kling et thirtydot ont suggéré d'utiliser le sélecteur d'attribut [att=val] (a[rel="external"]). Mais cela ne fonctionnera que si external est la valeur uniquementrel 

Si vous souhaitez styliser des liens pouvant contenir une ou plusieurs valeurs rel, vous devez utiliser le sélecteur d'attribut [att~=val]:

a[rel~="external"] (notez le caractère tilde )

Un exemple pour un tel lien pourrait être:

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

Voir http://www.w3.org/TR/css3-selectors/#attribute-representation pour la spécification.

53
unor

C'est possible avec le sélecteur d'attributs :

a[rel=external] {

}

Remarque: Ce sélecteur est non pris en charge dans IE6.

10
Felix Kling

Utilisez le sélecteur d'attribut :

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

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

Fonctionne dans tous les navigateurs modernes, et IE7 +

2
thirtydot

Possible avec *.

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

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

0
K-Gun