Επιλογείς CSS Selectors

Σχετικά με τους επιλογείς των CSS Selectors

Στο προηγούμενο μάθημα κάναμε μια εισαγωγή στα CSS και είδαμε πως ορίζεται ο κάθε κανόνας CSS. Στο πρώτο κομμάτι του κάθε κανόνα είδαμε πως υπάρχει ένας επιλογέας. Στο μάθημα αυτό θα δούμε τους διαφορετικούς τύπους που έχουν οι επιλογείς των CSS Selectors.

Ο επιλογέας element

Στα CSS χρησιμοποιούμε το element όταν αναφερόμαστε στην μορφοποίηση μιας συγκεκριμένης ετικέτας html οπότε και χρησιμοποιούμε το όνομα της ως επιλογέα. Στην περίπτωση αυτή ξεκινάμε απλά με το όνομα της html ετικέτας.  Παράδειγμα

p {
    text-align: left;
    color: blue;
}

Κάθε φορά που θα χρησιμοποιήσουμε την ετικέτα p, το κείμενο μέσα σε αυτή θα στοιχηθεί αριστερά και θα έχει μπλε χρώμα.

Ο επιλογέας id

Με τον όρο id εννοούμε ένα δικό μας όνομα που δίνουμε σε έναν κανόνα. Ο σκοπός μιας τέτοιας χρήσης είναι να το χρησιμοποιήσουμε ως ιδιότητα μέσα σε μια ετικέτα html έτσι ώστε να εφαρμοστεί η μορφοποίηση που θα ορίσουμε μόνο σε  αυτή την ετικέτα. Ο επιλογέας σε μια τέτοια περίπτωση ξεκινάει με το σύμβολο # και ακολουθεί το όνομα που δίνουμε. Για παράδειγμα:

#MyParStyle {
    text-align: left;
    color: blue;
}

Ορίζουμε ένα id με ένα δικό μας όνομα και ορίζουμε με αυτόν μια σειρά μορφοποιήσεων. Για να το χρησιμοποιήσουμε μέσα σε μια ετικέτα html θα κάνουμε το εξής:

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

Στην πρώτη html ετικέτα παραγράφου καλούμε το id με το όνομα όπως το ορίσαμε έτσι ώστε να εφαρμόσουμε την μορφοποίηση στην συγκεκριμένη ετικέτα. Η επόμενη ετικέτα html, This paragraph…, θα έχει την προκαθορισμένη από τον φυλλομετρητή μορφοποίηση.

Η χρήση επιλογέα id έχει το εξής αρνητικό θέμα: το όνομα του μπορεί να χρησιμοποιηθεί μια μόνο φορά μέσα στον κώδικα. Αυτό σημαίνει πως id χρησιμοποιούμε μόνο όταν θέλουμε να μορφοποιήσουμε μια συγκεκριμένη ετικέτα html. Βεβαίως το id μπορούμε να το χρησιμοποιήσουμε σε οποιαδήποτε html ετικέτα, αλλά μόνο μια φορά.

Ο άλλος ποιο ευέλικτος τρόπος είναι αυτός του επιλογέα κλάσης, class selector.

Ο επιλογέας κλάση – class selector

Η περίπτωση αυτή μοιάζει πολύ με τον επιλογέα id που είδαμε παραπάνω με την διαφορά ότι χρησιμοποιούμε το σύμβολο τελεία, ακολουθούμενο από το όνομα της. Παράδειγμα:

.MyTextStyle {
    text-align: left;
    color: blue;
}

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

<h1 class=" MyTextStyle ">Επικεφαλίδα 1</h1>
<p class=" MyTextStyle ">1η παράγραφος</p>
<p>2η παράγραφος</p>

Σε αυτό το παράδειγμα βλέπουμε ότι χρησιμοποιούμε το όνομα της κλάσης με χρήση της ιδιότητας class=””. Την καλούμε σε όσες ετικέτες θέλουμε, στις 2 πρώτες δηλαδή.

Ομαδοποίηση επιλογέων

Έστω ότι έχουμε 3 element selectors, η 1η περίπτωση, οι οποίοι κάνουν την ίδια λειτουργία:

p {
    text-align: left;
    color: blue;
}
h2 {
    text-align: left;
    color: blue;
}
h3 {
    text-align: left;
    color: blue;
}

Στην περίπτωση αυτή, για να μειώσουμε τον όγκο του κώδικα μπορούμε να γράψουμε τον κώδικα ως εξής:

P, h2, h3 {
    text-align: left;
    color: blue;
}

Επίλογος

Σε αυτό το άρθρο είδαμε του βασικούς επιλογείς CSS selectors. Οι συνδυασμοί που μπορούμε να κάνουμε είναι αρκετοί. Στο επόμενο μάθημα θα δούμε ολοκληρωμένα παραδείγματα ενώ στα επόμενα μαθήματα θα δούμε διάφορους τρόπους υλοποίησης.