Monimutkaiset valitsimet linkkien tiloilla CSS:ssä

Kaikkia monimutkaisia valitsimia, joita olemme aiemmin oppineet, voidaan soveltaa myös linkkeihin.

Katsotaanpa esimerkkiä. Oletetaan, että linkkimme ovat lohkossa, jolla on määritetty id:

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

Määritetään tyylit tämän lohkon linkeille:

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

Yleensä link- ja visited tiloja ei erotella, joten koodia voidaan yksinkertaistaa seuraavasti:

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

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