Урок 81 із 239
34%
← Назад

Нюанси послідовності станів посилань у CSS

Розберемо порядок запису псевдокласів посилань у CSS та правило LoVe HAte.

Порядок псевдокласів посилань

Псевдокласи посилань успадковують стилі один від одного. Через це порядок їх написання у CSS має значення.

Наприклад, якщо для стану :link прибрати підкреслення, воно також може зникнути в інших станах посилання.

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

a:link {
}

a:visited {
}

a:hover {
}

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

Запам'ятати порядок допомагає правило LoVe HAte: Link → Visited → Hover → Active.

Приклад

<a href="#">
  Посилання
</a>
a:link {
  color: skyblue;
}

a:visited {
  color: green;
}

a:hover {
  color: red;
  text-decoration: none;
}

a:active {
  color: black;
}

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

📌 Завдання:
  1. №1
  3. Зробіть:
  5. • стан :hover — червоний колір і без підкреслення;
  6. • стан :link — голубий колір;
  7. • стан :visited — зелений колір;
  8. • стан :active — чорний колір.
💡 Показати підказку

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

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

a:visited {
  color: green;
}

a:hover {
  color: red;
  text-decoration: none;
}

a:active {
  color: black;
}