# Сложные селекторы с состояниями ссылок на CSS

Все сложные селекторы, которые мы изучали ранее, можно применять и для ссылок.

Давайте посмотрим на примере. Пусть наши ссылки находятся в блоке с заданным `id`:

`<div id="block"> <a href="#">ссылка</a> <a href="#">ссылка</a> <a href="#">ссылка</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; }`

## Ссылка с классом

Пусть теперь сами ссылки имеют класс:

`<a href="#" class="eee">ссылка</a> <a href="#" class="eee">ссылка</a> <a href="#" class="eee">ссылка</a>`

Давайте зададим стили для ссылок, имеющих такой класс:

`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; }`

## Практические задачи

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

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

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

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

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

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

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

`.block a.zzz { color: red; } .block a.zzz:hover { text-decoration: none; }`
←→
↑