Сложни селектори със състояния на връзки в CSS

Всички сложни селектори, които изучавахме по-рано, могат да се прилагат и за връзки.

Нека разгледаме пример. Нека нашите връзки се намират в блок със зададен id:

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

Нека зададем стилове за връзките от този блок:

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

Като правило, състоянията link и visited не се разделят, затова кодът може да се опрости по следния начин:

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

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