Σύνθετοι επιλογείς με καταστάσεις συνδέσμων στο 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;
}