Селекторы для ссылок

С появлением новых веб-технологий и платформ, вид ссылок на веб-странице изменился. Ссылки 2014 года могут указывать, на все что угодно. Внешние или внутренние ссылки, PDF или SVG-файлы, изображения или архивы, даже на события в JavaScript.

Если смотреть на синий отрывок текста — это не даёт абсолютно больше никаких признаков. Конечно, можно использовать полезный атрибут title, но он скрыт.

Итак, как мы можем сделать ссылки более информативным не добавляя для каждой ссылки свой уникальный класс. В примерах ниже Вы увидите; селекторы для ссылок с использованием бесплотного сервиса веб-иконок Webfont от fontello.

Селекторы CSS для ссылок

Преимущество селекторов для ссылок.

  • Нет CSS классов
  • Без javascript
  • Без дополнительной разметки
к меню ↑

Обратная связь

Протокол mailto: определяет общий тип элемента a и открывает электронную почту. Селектор CSS находит все ссылки, которые начинаются с mailto: и добавит иконку в виде конверта в начало ссылки. Пользователь видя ссылку с конвертом, поймёт зачем она, даже если не умеет читать :).

<a title="Отправить письмо" href="mailto:pixelbot.crimea@gmail.com">Отправить письмо</a>

Селектор для mailto:

[href^="mailto:"]:before {
  content: '\e800';
}

Отправить письмо

к меню ↑

Ссылка на архив .zip, .gz

В интернете очень много сайтов, на которых можно скачать программы, книги, образы и многое другое, большинство из них в формате .zip, .exe, .gz. Селектор CSS находит ссылки с таким расширением файла и добавит к ним иконку.

Селектор для архивов:

[href$=".zip"]:after, 
[href$=".exe"]:after,
[href$=".gz"]:after {
  content: '\e801';
  padding-left: .2em;
  vertical-align: middle;
}

Скачать webicon

к меню ↑

Ссылка на RSS

Многие добавляют иконку RSS для ссылки на Ленту новостей. Селектор CSS находит ссылку URL в которой присутствуют слова; rss, feed, или расширение файла .xml.

CSS селектор для ленты новостей:

[href$=".rss"]:before, 
[href$="rss.xml"]:before, 
[href*="/feed/"]:before,
[href*="/rss/"]:before {
  content: '\e802';
}

Лента новостей

к меню ↑

Новое окно

Пользователь должен знать от том; что после нажатия на ссылку, УРЛ откроется в новой вкладке/окне браузера.

Селектор для новой вкладки:

[target="_blank"]:after {
  content:'\e803';
}

Новая вкладка

к меню ↑

Безопасная страница https

Информировать пользователя о ссылке на безопасную страницу, также можно с помощью селекторов CSS. Любая безопасная ссылка URL https, будет с иконкой в виде замка.

Селектор для безопасной страницы:

[href^="https:"]:before {
  content:'\e804';
}

Безопасный платеж

к меню ↑

Внешняя ссылка

Пользователь будет знать, что эта ссылка перенаправит его на другой ресурс.

В этом примере всё просто, псевдо-класс :not находит ссылки на другой домен (т.е. внешняя ссылка), и будет добавлена иконка.

Псевдокласс для внешней ссылки:

[href^="http"]:not([href*="htmlhook.ru"]) {
  content: " \e816";
  vertical-align: super;
}

Ссылка на другой домен

к меню ↑

Анимация

В примере ниже, при наведении на ссылку, иконка от fontello будет появляться с помощью CSS анимации.

<a title="Внешняя ссылка" href="http://demo.htmlhook.ru/" rel="external">demo.htmlhook</a>

Селектор для внешней ссылки — иконка сверху:

a[rel*='external'] {
  position: relative;
}
a[rel*='external']:after {
  content: " \e816";
  font-size: 12px;
  left: 50%;
  margin-left: -6px;
  opacity: 0;
  position: absolute;
  top: -22px;
  -webkit-transition: all .25s linear;
     -moz-transition: all .25s linear;
      -ms-transition: all .25s linear;
       -o-transition: all .25s linear;
          transition: all .25s linear;
}
a[rel*='external']:hover:after {
  opacity: 1;
  top: -18px;
}

Внешняя ссылка

Возможно Вы хотите, чтобы иконка появлялась справа а не сверху. Смотрите следующий пример.

Селектор для внешней ссылки — иконка справа:

a[href^='http'] {
  padding-right: 15px;
  position: relative;
}
a[href^='http']:after {
  content: "\f08e";
  font-size: 12px;
  right: -15px;
  opacity: 0;
  position: absolute;

  -webkit-transition: all .25s linear;
     -moz-transition: all .25s linear;
      -ms-transition: all .25s linear;
       -o-transition: all .25s linear;
          transition: all .25s linear;
}
a[href^='http']:hover:after {
  opacity: 1;
  right: 0;
}

Внешняя ссылка

На мобильном браузере анимация не будут работать правильно, потому что нет свойства “hover” Для мобильного браузера используйте Медиа-запросы CSS чтобы всегда отображать значки когда область просмотра ниже заданной ширины.

@media only screen and (max-width: 800px) {
  a[href^='http']:after,
  a[href^='https']:after{
    opacity: 1;
    right: 0;
  }
}
к меню ↑

Страница автора

Ссылка на страницу Автора статьи обычно используется для аккаунта Google+. Web fonticon fontello предлагает для ссылки на страницу автора, небольшую иконку в виде силуэта.

Селектор для страницы автора:

[rel="author"]:before,
[href*="rel=author"] {
  content: '\e805';
}

к меню ↑

Предыдущая и следующая запись

Пара полезных ссылок для навигации по сайту Предыдущая и Следующая запись. Эти семантические атрибуты помогают пользователям ориентироваться в записях сайта.

Селектор для навигации по записям:

[rel="prev"]:before {
  content: '\e807';
  padding-right: 1em;
}

[rel="next"]:after {
  content: '\e806';
  padding-left: 1em;
}

к меню ↑

Селектор для телефона

Протокол tel: эквивалентно mailto: и используется для элемента a. Хорошо поддерживается, но недостаточно, применяйте с осторожностью.

<a title="Телефон для связи" href="tel:55555555">5555 555 555</a>

CSS селектор для телефона:

[href^="tel:"]:before {
  content: '\e808';
}

5555 555 555

к меню ↑

Исходный код страницы

Протокол view-source: замечательная вещь, поддерживается Firefox и Chrome, view-source: может быть подключен к любому атрибуту href... который после нажатия на ссылку покажет исходный код. Нажмите на демонстрационную ссылку, чтобы увидеть код главной страницы моего блога.

Селектор для просмотра кода URL адреса:

[href^="view-source:"]:before {
  content: '\e809';
}

Исходный код страницы

к меню ↑

Ссылка на изображение

Стандартные типы файлов изображений поддерживаются селекторами CSS.

Селектор для ссылки на изображение:

[href$=".jpg"]:before, 
[href$=".jpeg"]:before, 
[href$=".png"]:before, 
[href$=".gif"]:before {
  content: '\e809';
}

Ссылка на изображение

к меню ↑

Ссылка на документ

Возможно, на вашем сайте есть ссылки на документы, с расширением .doc, .docs, .pdf или URL содержит слово docs для этого случая есть селектор [href*="/docs/"]. В зависимости от ваших настроек, браузер будет пытаться открыть документ или скачает если для ссылки применить атрибут download.

Селектор для ссылки на документ:

[href*=".pdf"]:before,
[href*=".doc"]:before,
[href*=".docs"]:before,
[href*="/docs/"]:before {
  content: '\e80b';
}

Таблица стилей в формате .doc

к меню ↑

Ссылка на текстовый файл

Еще один тип файла, на этот раз для текстовых файлов. Это могут быть либо .txt или .md, их часто используют на ГитХаб.

Селектор для ссылки на текстовый файл:

[href$=".txt"]:before, 
[href$=".md"]:before {
  content: '\e815';
}

Таблица стилей в формате .txt

к меню ↑

Социальные сети

Скорее всего Вы часто используете ссылки на крупнейшие социальные сети, такие как Twitter, Youtube, Github, LinkedIn, Google+ и Facebook.

Селектор для ссылки на социальные сети:

/* twitter */
	[href*="twitter.com/"]:before {
		content: '\e80f';
	}
	/* facebook */
	[href*="facebook.com/"]:before {
		content: '\e810';
	}
	/* linkedin */
	[href*="linkedin.com/"]:before {
		content: '\e813';
	}
	/* google+ */
	[href*="plus.google.com/"]:before {
		content: '\e812';
	}
	/* youtube */
	[href*="youtube.com/"]:before,
	[href*="youtu.be/"]:before {
		content: '\e811';
	}
	/* github */
	[href*="github.com/"]:before,
	[href*="youtu.be/"]:before {
		content: '\e814';
	}

Ссылки на социальные сети
Ссылки на социальные сети с иконкой
к меню ↑

Переключатели

Aria-pressed в HTML обеспечивает механизм, с помощью которого в доступной форме можно указать, в каком состоянии находится переключатель кнопки, в нажатом или в не нажатом положении. Кнопки и ссылки с rel="button" показывают в каком положении переключатель ВКЛ. или ВЫКЛ. Обратите внимание, что для элементов a иконка появляется только если они имеют rel="button". Эти два атрибута должны использоваться вместе.

<a role="button" href="javascript:void(0)" aria-pressed="false">Выключить</a>
<a role="button" href="javascript:void(0)" aria-pressed="true">Включить</a>

Выключить
Включить

Селектор для переключателей:

[role="button"][aria-pressed="true"]:before, button[aria-pressed="true"]:before {
	content: '\e80e';
        color:red;
}

[role="button"][aria-pressed="false"]:before, button[aria-pressed="false"]:before {
	content: '\e80d';
        color:green;
}
к меню ↑

Ссылка на библиотеку JavaScript

Нам программистам, время от времени нужна ссылка на файлы javascript, как правило, просто, чтобы покрасоваться. Файлы JSON, которые также рассматриваются в этом примере, в случае, если Вам нужна прямая ссылка на информационный ресурс.

Селектор для библиотеки JavaScript:

[href$=".js"]:before, 
[href*="/js/"]:before, 
[href*="/javascript/"]:before, 
[href$=".json"]:before {
  content: '\e80c';
}

Файл JavaScript html5shiv