CSSдаги ҳавола ҳолатлари билан мураккаб селекторлар

Биз илгари ўрганган барча мураккаб селекторларни ҳаволалар учун ҳам қўллаш мумкин.

Келгила, мисолда кўрамиз. Бизнинг ҳаволаларимиз берилган id блок ичида жойлашган бўлсин:

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

Келгила, ушбу блокданги ҳаволалар учун Uslub берайлик:

#block a:link, #block a:visited {
	color: red;
}
#block a:hover {
	text-decoration: none;
}

Одатда, link ва visited ҳолатлари ажратилмайди, шунинг учун кодни куйидагича soddalashtirish мумкин:

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

Куйидаги коддаги селектор нимани танлаши ҳақида сўзланг. Сўнгра ушбу селекторга мос келадиган HTML кодни ёзинг. Селектор билан код:

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