CSS - стиль ссылки на основе атрибута "rel"?
<a href="#" onclick="location.href='http://google.com'; return false;" rel="external"> LINK </a>
Можно ли добавить правила css для rel= "external"?
Ответы
Ответ 1
Феликс Клинг и тридцать предложили использовать селектор атрибутов [att=val]
(a[rel="external"]
). Но это будет работать, только если external
является единственным значением rel
.
Если вы хотите создать ссылки, которые могут иметь 1 или более значений rel
, вы должны использовать селектор атрибутов [att~=val]
:
a[rel~="external"]
(обратите внимание на символ tilde)
Примером такой ссылки может быть:
<a href="http://google.com" rel="external nofollow">LINK</a>
См. http://www.w3.org/TR/css3-selectors/#attribute-representation для спецификации.
Ответ 2
Это возможно с помощью селектора атрибутов:
a[rel=external] {
}
Примечание: Это селектор не поддерживается в IE6.
Ответ 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/