Урок 80 із 239
33%
← Назад

Стани посилань у CSS

У цьому уроці розберемо псевдокласи CSS для роботи зі станами посилань: :link, :visited, :hover та :active.

Що таке стани посилань

Посилання можуть мати різний вигляд залежно від того, що робить користувач. Наприклад, посилання може бути ще не відвіданим, вже відкритим, на нього можна навести курсор або натиснути.

Для вибору різних станів використовуються псевдокласи. Вони записуються після селектора через двокрапку.

Псевдоклас :link

:link вибирає посилання, які користувач ще не відвідував.

a:link {
  color: red;
}

Псевдоклас :visited

:visited вибирає посилання, які користувач вже відкривав.

a:visited {
  color: green;
}

Псевдоклас :hover

:hover спрацьовує, коли користувач наводить курсор мишки на елемент.

a:hover {
  text-decoration: none;
}

Псевдоклас :active

:active спрацьовує в момент натискання на посилання, коли кнопка мишки ще утримується.

a:active {
  color: blue;
}

Повний приклад

<a href="#">
  link
</a>
a:link {
  color: red;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}

a:active {
  color: blue;
}
❗ Важливо:

Порядок написання псевдокласів для посилань має значення. Зазвичай використовують порядок LVHA: :link → :visited → :hover → :active.

Практичні завдання

📌 Завдання:
  1. №1
  3. Зробіть всі невідвідані посилання червоними.
📌 Завдання:
  1. №2
  3. Зробіть відвідані посилання зеленими.
📌 Завдання:
  1. №3
  3. При наведенні на посилання приберіть підкреслення.
📌 Завдання:
  1. №4
  3. При натисканні на посилання зробіть його синім.
💡 Показати підказку

Стан посилання записується після селектора: a:hover, a:visited, a:active.

✅ Показати відповідь
1) a:link { color: red; }

2) a:visited { color: green; }

3) a:hover { text-decoration: none; }

4) a:active { color: blue; }