Πολλαπλοί επιλογείς συγχωνευμένοι στο CSS
Για να επιλέξετε ένα στοιχείο που ταυτόχρονα πληροί τις προϋποθέσεις πολλαπλών επιλογέων, πρέπει να γράψετε αυτούς τους επιλογείς συγχωνευμένους, χωρίς κενό.
Για παράδειγμα, ο ακόλουθος επιλογέας θα επιλέξει ένα στοιχείο
που ταυτόχρονα έχει την κλάση bbb και την κλάση
zzz:
.bbb.zzz {
}
Και ο ακόλουθος επιλογέας θα επιλέξει μια επικεφαλίδα h2,
που ταυτόχρονα έχει την κλάση bbb και την κλάση
zzz:
h2.bbb.zzz {
}
Με τον καθορισμένο τρόπο μπορείτε να κατασκευάσετε αυθαίρετες κατασκευές επιλογέων. Σε αυτήν την περίπτωση, η σειρά των χρησιμοποιούμενων επιλογέων δεν έχει σημασία, εκτός από τον κανόνα ότι οι επιλογείς ετικετών πρέπει να τοποθετούνται στην αρχή.
Δηλαδή, για παράδειγμα, οι επιλογείς .bbb.zzz
και .zzz.bbb είναι πλήρως ισοδύναμοι.
Επιπλέον, μπορείτε να σχηματίσετε επιλογείς με
χρήση id, για παράδειγμα, όπως αυτοί:
#elem.eee, ή h2#elem.eee,
ή h2.eee#elem και ούτω καθεξής.
Πείτε τι επιλέγει ο επιλογέας στον παρακάτω κώδικα. Στη συνέχεια γράψτε κώδικα HTML που ταιριάζει με αυτόν τον επιλογέα. Εδώ είναι ο κώδικας με τον επιλογέα:
.bbb.zzz {
color: red;
}
Πείτε τι επιλέγει ο επιλογέας στον παρακάτω κώδικα. Στη συνέχεια γράψτε κώδικα HTML που ταιριάζει με αυτόν τον επιλογέα. Εδώ είναι ο κώδικας με τον επιλογέα:
h2.bbb.zzz {
color: red;
}
Πείτε τι επιλέγει ο επιλογέας στον παρακάτω κώδικα. Στη συνέχεια γράψτε κώδικα HTML που ταιριάζει με αυτόν τον επιλογέα. Εδώ είναι ο κώδικας με τον επιλογέα:
#elem.bbb {
color: red;
}
Πείτε τι επιλέγει ο επιλογέας στον παρακάτω κώδικα. Στη συνέχεια γράψτε κώδικα HTML που ταιριάζει με αυτόν τον επιλογέα. Εδώ είναι ο κώδικας με τον επιλογέα:
#elem.bbb.zzz {
color: red;
}
Πείτε τι επιλέγει ο επιλογέας στον παρακάτω κώδικα. Στη συνέχεια γράψτε κώδικα HTML που ταιριάζει με αυτόν τον επιλογέα. Εδώ είναι ο κώδικας με τον επιλογέα:
h2#elem.bbb {
color: red;
}