Урок 85 із 239
36%
← Назад

Посилання з класом у CSS

Навчимося застосовувати стилі до посилань, які мають CSS клас, використовуючи псевдокласи станів.

Клас у посиланнях

Посилання можуть мати власні CSS класи. Це дозволяє стилізувати тільки певні посилання, а не всі посилання на сторінці.

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

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

<a href="#" class="eee">
  link
</a>
a:link.eee,
a:visited.eee {
  color: red;
}

a:hover.eee {
  text-decoration: none;
}

Порядок запису селекторів

Порядок класу і псевдокласу не має значення. Обидва варіанти працюють однаково.

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

a:hover.eee {
  text-decoration: none;
}


/* Те саме */

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

a.eee:hover {
  text-decoration: none;
}

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

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

a.zzz вибирає тільки посилання <a> з класом zzz. a.zzz:hover працює при наведенні курсора на ці посилання.

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

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


CSS:

a.zzz {
  color: red;
}

a.zzz:hover {
  text-decoration: none;
}


--------------------------------


№2

#block a.zzz вибирає посилання з класом zzz всередині елемента з id="block".


HTML:

<div id="block">
  <a href="#" class="zzz">
    link
  </a>
</div>


CSS:

#block a.zzz {
  color: red;
}

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


--------------------------------


№3

.block a.zzz вибирає посилання з класом zzz всередині елемента з класом block.


HTML:

<div class="block">
  <a href="#" class="zzz">
    link
  </a>
</div>


CSS:

.block a.zzz {
  color: red;
}

.block a.zzz:hover {
  text-decoration: none;
}