Оформлять ссылку в CSS стиле на основе атрибута «rel»?

#css #hyperlink

#css #гиперссылка

Вопрос:

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

возможно ли добавить правила css для rel=»external» ?

Ответ №1:

Феликс Клинг и thirtydot предложили использовать [att=val] селектор атрибутов ( a[rel="external"] ). Но это будет работать только в том случае, external если это единственное rel значение.

Если вы хотите оформить ссылки, которые могут иметь 1 или более rel значений, вам следует использовать [att~=val] селектор атрибутов:

a[rel~="external"] (обратите внимание на символ тильды)

Примером такой ссылки может быть:

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

Смотрите http://www.w3.org/TR/css3-selectors/#attribute-representation для спецификации.

Ответ №2:

Это возможно с помощью селектора атрибутов:

 a[rel=external] {

}
  

Примечание: этот селектор не поддерживается в IE6.

Комментарии:

1. это работает: D Меня не волнует IE 6, мой сайт даже не отображается в этом браузере: x

Ответ №3:

Используйте селектор атрибутов:

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

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

Работает во всех современных браузерах и IE7

Ответ №4:

Возможно с помощью * .

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

Ссылки:
http://github.com/qeremy/so
http://css-tricks.com/attribute-selectors/
http://www.vanseodesign.com/css/attribute-selectors/