Как выделить внешние ссылки на сайте

Здравствуйте, сегодня поговорим как с помощью CSS выделить на сайте внешние ссылки.

Скачать исходники для статьи можно ниже

Оказывается все достаточно просто!

1. Открываем файл стилей.

В wordpress нужно зайти в панель управления, в левом меню выбрать пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл style.css.

2. Вставляем внутрь файла стилей следующий код:

a:not([href*="mnogoblog"]) {
background: yellow; /* Желтый цвет фона */
}

В данном коде мы используем 2 условия для тега «a» (ссылка):

1. Псевдокласс «not» - задает правила стилей для элементов, которые не содержат указанный селектор.

a:not — то есть это ссылка, которое не содержит какого-то атрибута…

2. Значение атрибута, которое содержит указанный текст

href*=»mnogoblog» — то есть атрибут, содержащий некоторый текст, а именно mnogoblog. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце.

Все вместе у нас получилось следующее — если ссылка не содержит текст mnogoblog, то к ней следует применить данный стиль, а именно, в данном примере окрасить ее в желтый цвет.

 

Можно также вставить например какую-нибудь иконку (картинку), если данная ссылка является внешней, тогда код стиля будет следующий:

a:not([href*="mnogoblog"]) { 
background: url(http://mnogoblog.ru/wp-content/uploads/2013/08/iconcanav.gif) no-repeat !important;
padding-left: 20px !important;
}

 

PS: То же рабочий вариант, только без использования псевдокласса not:

a {  
background: blue;
}

[href*="mnogoblog"] { 
background: yellow; /* Желтый цвет фона */
}

То есть здесь: первой часть кода все ссылки окрашиваются в синий цвет, а второй частью кода ссылки, содержащие текст mnogoblog окрашиваются в желтый цвет — и тем самым все внешние ссылки будут выделены синим цветом, а внутренние — желтым!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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

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

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