Стани посилань :link і :visited у CSS

Розберемо об'єднання станів :link і :visited та спрощення CSS для стилізації посилань.

Об'єднання :link і :visited

Стани :link і :visited часто мають однакові стилі. Наприклад, нам потрібно зробити всі посилання червоними незалежно від того, чи відвідував їх користувач.

a:link, a:visited {
  color: red;
}

a:hover {
  text-decoration: none;
}

a:active {
  color: blue;
}

<a href="#">
  link
</a>

Спрощення коду

Оскільки звичайний селектор a застосовується до всіх посилань, можна не писати окремо :link і :visited.

a {
  color: red;
}

a:hover {
  text-decoration: none;
}

a:active {
  color: blue;
}

❗ Важливо:

Селектор a охоплює всі посилання: нові, відвідані та інші стани. Окремі псевдокласи потрібні, коли потрібно задати особливу поведінку для конкретного стану.

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

📌 Завдання:

№1
Зробіть всі посилання червоними у станах :link і :visited.
При наведенні курсора приберіть підкреслення.
При натисканні зробіть колір посилання синім.

💡 Показати підказку

Якщо стилі :link і :visited однакові, їх можна об'єднати через кому або замінити простим селектором a.

✅ Показати відповідь

Варіант 1:

a:link, a:visited {
  color: red;
}

a:hover {
  text-decoration: none;
}

a:active {
  color: blue;
}


Варіант 2:

a {
  color: red;
}

a:hover {
  text-decoration: none;
}

a:active {
  color: blue;
}