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

Здравствуйте, сегодня поговорим как с помощью 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(https://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

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