Здравствуйте, сегодня поговорим как с помощью 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 окрашиваются в желтый цвет – и тем самым все внешние ссылки будут выделены синим цветом, а внутренние – желтым!
