Σύνθετοι επιλογείς με καταστάσεις συνδέσμων στο CSS
Όλοι οι σύνθετοι επιλογείς που μελετήσαμε νωρίτερα, μπορούν να εφαρμοστούν και για τους συνδέσμους.
Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι οι σύνδεσμοί μας
βρίσκονται σε ένα μπλοκ με δεδομένο
id:
<div id="block">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</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;
}
Εξηγήστε, τι επιλέγει ο επιλογέας στον παρακάτω κώδικα. Στη συνέχεια γράψτε κώδικα HTML που ταιριάζει με αυτόν τον επιλογέα. Εδώ είναι ο κώδικας με τον επιλογέα:
#test a {
color: red;
}
#test a:hover {
text-decoration: none;
}