Επιλογείς CSS

Επιλογείς CSS

Οι επιλογείς CSS χρησιμοποιούνται για την "εύρεση" (ή επιλογή) των HTML στοιχείων που θα ρυθμιστούν με στυλ.

Μπορούμε να κατηγοριοποιήσουμε τους επιλογείς CSS σε πέντε κατηγορίες:

Αυτή η σελίδα θα εξηγήσει τους βασικούς επιλογείς CSS.

Επιλογέας στοιχείου CSS

Ο επιλογέας στοιχείου επιλέγει τα στοιχεία HTML με βάση το όνομα του στοιχείου.

Παράδειγμα

Σε αυτό το παράδειγμα, όλα τα στοιχεία <p> της σελίδας θα κεντραριστούν και θα έχουν κόκκινο κείμενο:

p {
  text-align: center;
  color: red;
}

Δοκιμάστε το προσωπικά

Επιλογέας id CSS

Ο επιλογέας id χρησιμοποιεί την ιδιότητα id του στοιχείου HTML για να επιλέξει το συγκεκριμένο στοιχείο.

Το id του στοιχείου είναι μοναδικό στη σελίδα, οπότε ο επιλογέας id χρησιμοποιείται για να επιλέξει ένα μοναδικό στοιχείο!

Για να επιλέξετε στοιχεία με συγκεκριμένο id, γράψτε έναν κόκκινο σημείο (#), ακολουθούμενο από το id του στοιχείου.

Παράδειγμα

Αυτός ο κανόνας CSS θα εφαρμοστεί στο στοιχείο HTML με την ιδιότητα id="para1":

#para1 {
  text-align: center;
  color: red;
}

Δοκιμάστε το προσωπικά

Σημείωση:Η ονομασία του id δεν μπορεί να ξεκινά με αριθμό.

Επιλογέας κλάσης CSS

Ο επιλογέας κλάσης επιλέγει τα στοιχεία HTML με συγκεκριμένη ιδιότητα class.

Για να επιλέξετε στοιχεία με συγκεκριμένη κλάση, γράψτε έναν σημείο (.), ακολουθούμενο από το όνομα της κλάσης.

Παράδειγμα

Σε αυτό το παράδειγμα, όλα τα στοιχεία HTML με την κλάση class="center" θα είναι κόκκινα και θα κεντραριστούν:

.center {
  text-align: center;
  color: red;
}

Δοκιμάστε το προσωπικά

Μπορείτε επίσης να καθορίσετε ότι μόνο συγκεκριμένα στοιχεία HTML θα επηρεάζονται από την κλάση.

Παράδειγμα

Σε αυτό το παράδειγμα, μόνο τα στοιχεία <p> με την κλάση class="center" θα είναι κεντραρισμένα:

p.center {
  text-align: center;
  color: red;
}

Δοκιμάστε το προσωπικά

Τα στοιχεία HTML μπορούν επίσης να αναφέρονται σε πολλές κλάσεις.

Παράδειγμα

Σε αυτό το παράδειγμα, το στοιχείο <p> θα ρυθμιστεί με βάση τις κλάσεις class="center" και class="large":

<p class="center large">Αυτός ο παράγραφος αναφέρεται σε δύο κλάσεις.</p>

Δοκιμάστε το προσωπικά

Σημείωση:Η ονομασία της κλάσης δεν μπορεί να ξεκινά με αριθμό!

Γενικός επιλογέας CSS

Ο γενικός επιλογέας (*), επιλέγει όλα τα στοιχεία HTML της σελίδας.

Παράδειγμα

Οι παρακάτω κανόνες CSS επηρεάζουν κάθε στοιχείο HTML της σελίδας:

* {
  text-align: center;
  color: blue;
}

Δοκιμάστε το προσωπικά

Ομαδοποιημένος επιλογέας CSS

Οι ομαδοποιημένοι επιλογείς επιλέγουν όλα τα στοιχεία HTML με τα ίδια ορισμένα στυλ.

Δείτε τον παρακάτω κώδικα CSS (οι στοιχεία h1, h2 και p έχουν τα ίδια ορισμένα στυλ):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Είναι καλύτερο να ομαδοποιήσετε τους επιλογείς για να μειώσετε όσο το δυνατόν τον κώδικα.

Για να ομαδοποιήσετε τους επιλογείς, χρησιμοποιήστε την κόμμα για να διαχωρίσετε κάθε επιλογέα.

Παράδειγμα

Σε αυτό το παράδειγμα, ομαδοποιούμε τους επιλογείς που αναφέρονται παρακάτω στον κώδικα:

h1, h2, p {
  text-align: center;
  color: red;
}

Δοκιμάστε το προσωπικά

Όλοι οι απλοί επιλογείς CSS

Επιλογέας Παράδειγμα Περιγραφή παραδείγματος
.class .intro Επιλέξτε όλα τα στοιχεία με την ιδιότητα class="intro".
#id #firstname Επιλέξτε το στοιχείο με id="firstname".
* * Επιλέξτε όλα τα στοιχεία.
στοιχείο p Επιλέξτε όλα τα στοιχεία <p>.
στοιχείο,στοιχείο,.. div, p Επιλέξτε όλα τα στοιχεία <div> και όλα τα στοιχεία <p>.

Εκτεταμένη Ανάγνωση

Βιβλία Εκτός Κλασσών:Επιλογέας στοιχείου CSS

Βιβλία Εκτός Κλασσών:Ομαδοποίηση Επιλογέων CSS

Βιβλία Εκτός Κλασσών:Αναλυτική Επεξήγηση Επιλογέα Κλάσης CSS

Βιβλία Εκτός Κλασσών:Αναλυτική Επεξήγηση Επιλογέα ID CSS

Βιβλία Εκτός Κλασσών:Αναλυτική Επεξήγηση Επιλογέα Προσδιορισμού CSS

Βιβλία Εκτός Κλασσών:Επιλογέας Προκαταρκτικού CSS

Βιβλία Εκτός Κλασσών:Επιλογέας Υποστοιχείου CSS

Βιβλία Εκτός Κλασσών:Επιλογέας Αξιόπιστου Αδελφού CSS