Στο CSS, μπορείτε να επιλέξετε στοιχεία, class και id να εφαρμόσετε στυλ και να προσαρμόσετε στοιχεία στην ιστοσελίδα σας. Ακολουθεί ένας λεπτομερής οδηγός για τον τρόπο χρήσης τους:
Επιλογή στοιχείων
Για να επιλέξετε όλες τις παρουσίες ενός συγκεκριμένου στοιχείου HTML, χρησιμοποιήστε το όνομα του στοιχείου ως επιλογέα. Για παράδειγμα, p επιλέγει όλες <p> τις ετικέτες στο έγγραφο.
Επιλογή Class
Για να επιλέξετε στοιχεία με την ίδια κλάση, χρησιμοποιήστε μια τελεία "." ακολουθούμενο από το όνομα της τάξης. Για παράδειγμα, .my-class επιλέγει όλα τα στοιχεία με την κλάση my-class.
Για να επιλέξετε στοιχεία με πολλές κλάσεις, χρησιμοποιήστε τελείες "." και απαριθμήστε τα ονόματα των κλάσεων διαχωρισμένα με κενά. Για παράδειγμα, .class1.class2 επιλέγει στοιχεία με τις δύο class1 και class2 τις κλάσεις.
Επιλογή id
Για να επιλέξετε ένα συγκεκριμένο στοιχείο από το id, χρησιμοποιήστε έναν κατακερματισμό "#" ακολουθούμενο από το στοιχείο id. Για παράδειγμα, #my-id επιλέγει το στοιχείο με το id my-id.
Συνδυασμός Element, Class, και ID Επιλογές
Μπορείτε να συνδυάσετε class επιλογές στοιχείων, και αναγνωριστικών για να στοχεύσετε συγκεκριμένα στοιχεία με συγκεκριμένες κλάσεις και ID.
Για παράδειγμα, div.my-class#my-id επιλέγει το <div> στοιχείο με το class my-class και το ID my-id.
Ακολουθεί ένα συγκεκριμένο παράδειγμα επιλογής στοιχείων, class και id σε CSS:
/* Select all <p> tags */
p {
color: blue;
}
/* Select elements with the class "my-class" */
.my-class {
background-color: yellow;
}
/* Select the element with the ID "my-id" */
#my-id {
font-weight: bold;
}
/* Combine element, class, and ID selections */
div.my-class#my-id {
border: 1px solid black;
}
Χρησιμοποιώντας τις επιλογές element, class, και id, μπορείτε εύκολα να επιλέξετε και να διαμορφώσετε συγκεκριμένα στοιχεία ή ομάδες στοιχείων στην ιστοσελίδα σας.