Урок 84 із 239
35%
← Назад

Складні селектори зі станами посилань у CSS

Навчимося застосовувати складні селектори разом із псевдокласами посилань :hover, :link і :visited.

Стан посилань у складних селекторах

Псевдокласи посилань можна використовувати не тільки з простим селектором a, а й зі складними селекторами.

<div id="block">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>
#block a:link,
#block a:visited {
  color: red;
}

#block a:hover {
  text-decoration: none;
}

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

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

#block a {
  color: red;
}

#block a:hover {
  text-decoration: none;
}

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

📌 Завдання:
  1. №1
  3. Поясніть, що вибирає селектор:
  5. #test a {
  6. color: red;
  7. }
  9. #test a:hover {
  10. text-decoration: none;
  11. }
  13. Потім напишіть HTML код, який підходить під цей селектор.
💡 Показати підказку

Селектор #test a вибирає всі теги a, які знаходяться всередині елемента з id=test. #test a:hover працює тільки при наведенні курсора на ці посилання.

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

<div id="test">
  <a href="#">
    link
  </a>

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


CSS:

#test a {
  color: red;
}

#test a:hover {
  text-decoration: none;
}