CSS :link — стиль невідвіданого посилання
CSS-селектор :link обирає посилання, за якими ще НЕ переходили.
Загальний опис
автор: NagarD
Синтаксис
:link {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1.5 | 18 | 4 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Повний життєвий цикл посилання: невідвідане зелене, відвідане темнішає, під курсором червоніє, у момент натискання жовте. Порядок правил важливий: link → visited → hover → active.
HTML
<p><a href="#">Невідвідане посилання</a> — зелене.
Наведи курсор — почервоніє, натисни й утримуй — пожовтіє.</p>CSS
/* невідвідане посилання */
a:link {
color: green;
}
/* відвідане посилання */
a:visited {
color: darkgreen;
}
/* під курсором */
a:hover {
color: red;
}
/* у момент натискання */
a:active {
color: yellow;
}:link діє лише на посилання, за якими ще не переходили: щойно відвідаєш адресу — стиль зникне, естафету перейме :visited.
HTML
<p><a href="#nikoly-ne-vidvidane">Невідвідане посилання — жовте</a></p>CSS
a:link {
background-color: yellow;
}Порядок LVHA: усі чотири стани важать однаково, тож виграє те правило, що нижче.
HTML
<p><a class="lnk" href="https://css.in.ua">Наведіть, натисніть, порівняйте</a></p>
<p><a class="lnk">А це <a> без href — під :link не підпадає</a></p>CSS
body { font: 16px/1.8 system-ui, sans-serif; }
.lnk:link { color: #2563eb; }
.lnk:visited { color: #9333ea; }
.lnk:hover { color: #1d4ed8; text-decoration: underline wavy; }
.lnk:active { color: #dc2626; }Коментарі
Коментарів ще немає — будьте першим!