Стили для внешних ссылок с помощью CSS

Стили для внешних ссылок с помощью CSS

От автора: Назначение стилей внешним ссылкам – обычное дело для большинства информационных сайтов вроде Wikipedia. Пользователю нужно понимать, когда его отсылают на другой ресурс. У многих сайтов проверка внешних ссылок происходит на серверной стороне, при этом к ним добавляется значение атрибута `rel=external` или класс `external`. В некоторых случаях это невозможно или ненужно. Прогулявшись по «паутине», я обнаружил следующие полезные фрагменты CSS для назначения стилей внешним ссылкам.

/* долгая песня */
a[href^="http://"]:not([href*="mysite.com"]),
a[href^="https://"]:not([href*="mysite.com"]), 
a[href^="//"]:not([href*="mysite.com"]), {
    
}
/* вариант покороче! */
a[href*="//"]:not([href*="mysite.com"]) {
    /* стили внешних ссылок, можно при желании употребить :before или :after! */
}

Сначала придется уточнить начало ссылки, затем домен. Внутренние и внешние ссылки при сравнении не совпадут. Это полезный код, который при случае очень удобно иметь в своей библиотеке!

Автор: David Walsh

Источник: http://davidwalsh.name/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

Комментарии (1)

  1. Евгений

    Какая удобная функция. Спасибо автору.
    А я создавал класс для внешних ссылок…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree