Складні селектори зі станами посилань на 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;
}

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

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

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