skip to main content

:link

css

Кратко 🔗

Псевдокласс :link используется для оформления ссылок, которые пользователь ещё никогда не открывал (в рамках текущего домена).

Пример 🔗

a:link {
color: blue;
}

Как пишется 🔗

Как и все псевдоклассы — через двоеточие и указание ключевого слова: :link можно применять для <a>-ссылок (и <area>), у которых указан href-атрибут. Если не указан тег в селекторах, будет применён для всех этих элементов¹ (и даже для мета-тега <link> при соблюдении условия наличия href-атрибута, но это уже совсем экзотика — мета-теги по умолчанию не отображаются на странице).

Как это понять 🔗

Приём с маркировкой посещённых (:visited) и непосещённых (:link) ссылок может быть полезен, например, в справочных документах типа этого справочника, если пользователь идёт последовательно от статьи к статье, тогда беглый взгляд на оглавление-ссылки позволит сразу оценить изученный материал:

a:link {
color: blue;
}

a:visited {
color: green;
}

/* ¹если не указать тег, класс или id, к которому применяется псевдокласс,
то свойство будет применено к любому возможному элементу, который способен
иметь этот псевдокласс: */


:visited {
color: red;
}

Подсказки 🔗

💡 По умолчанию браузер применяет к :visited-ссылкам особое оформление (по умолчанию более тёмно-синий, в отличие от непосещённых синих ссылок).

В работе 🔗

🛠 Классические ссылки — не стилизованные элементы меню, ссылки-кнопки, а просто ссылки в тексте — большая редкость, встречающаяся в основном в статьях и (около-)научных документах (типа Википедии). Но правильная стилизация посещённых ссылок может здорово помочь в навигации подобных документов в череде подобных.

Автор: Роман,