CSS-002 — CSS Selectors: Πώς επιλέγουμε τα HTML στοιχεία

CSS-002 — CSS Selectors: Πώς επιλέγουμε τα HTML στοιχεία

Καλώς ήρθες στο δεύτερο μάθημα CSS του Jerry's CodeLab!

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

Σήμερα θα μάθουμε κάτι εξαιρετικά σημαντικό: πώς επιλέγουμε ποια HTML στοιχεία θέλουμε να μορφοποιήσουμε.

1. Τι είναι οι CSS Selectors;

Οι selectors είναι οι επιλογείς της CSS. Μας επιτρέπουν να στοχεύουμε συγκεκριμένα HTML στοιχεία και να εφαρμόζουμε πάνω τους κανόνες μορφοποίησης.

Η βασική σύνταξη είναι:

selector {
  property: value;
}

Για παράδειγμα:

p {
  color: blue;
}

Ο selector p επιλέγει όλες τις παραγράφους και τους δίνει μπλε χρώμα.

2. Element Selector

Ο Element Selector επιλέγει όλα τα στοιχεία HTML ενός συγκεκριμένου τύπου.

h1 {
  color: #00bfa5;
}

p {
  font-size: 18px;
}

h2 {
  color: orange;
}

Στο παράδειγμα:

• Όλες οι επικεφαλίδες h1 γίνονται τιρκουάζ.
• Όλες οι παράγραφοι αποκτούν μέγεθος 18px.
• Όλες οι επικεφαλίδες h2 γίνονται πορτοκαλί.

3. Class Selector

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

Στην CSS χρησιμοποιούμε την τελεία (.) πριν από το όνομα της κλάσης.

.highlight {
  background-color: yellow;
  color: black;
}

Στην HTML χρησιμοποιούμε την ιδιότητα class:

<p class="highlight">
  Αυτή η παράγραφος είναι τονισμένη.
</p>

<h2 class="highlight">
  Και αυτή η επικεφαλίδα είναι τονισμένη.
</h2>

Η ίδια κλάση μπορεί να χρησιμοποιηθεί σε πολλά διαφορετικά στοιχεία.

4. ID Selector

Ο ID Selector επιλέγει ένα στοιχείο με συγκεκριμένο αναγνωριστικό.

Στην CSS χρησιμοποιούμε το σύμβολο # πριν από το όνομα του ID.

#main-title {
  color: red;
  text-align: center;
}

Στην HTML:

<h1 id="main-title">
  Καλώς ήρθες!
</h1>

Σε μια HTML σελίδα, ένα συγκεκριμένο ID πρέπει να χρησιμοποιείται σε ένα μόνο στοιχείο.

5. Universal Selector

Ο Universal Selector επιλέγει όλα τα HTML στοιχεία.

Συμβολίζεται με τον αστερίσκο (*).

* {
  box-sizing: border-box;
}

Ο παραπάνω κανόνας εφαρμόζει την ιδιότητα σε όλα τα στοιχεία της σελίδας.

6. Grouping Selector

Όταν θέλουμε να εφαρμόσουμε τους ίδιους κανόνες σε διαφορετικούς selectors, μπορούμε να τους ομαδοποιήσουμε χρησιμοποιώντας κόμμα.

h1, h2, p {
  font-family: Arial, sans-serif;
  color: #00bfa5;
}

Με αυτόν τον τρόπο οι ίδιοι κανόνες εφαρμόζονται στις επικεφαλίδες h1, στις επικεφαλίδες h2 και στις παραγράφους.

7. Descendant Selector

Ο Descendant Selector επιλέγει στοιχεία που βρίσκονται μέσα σε κάποιο άλλο στοιχείο, σε οποιοδήποτε επίπεδο εμφώλευσης.

div p {
  color: orange;
}

Ο παραπάνω κανόνας επιλέγει όλες τις παραγράφους που βρίσκονται μέσα σε ένα div, ακόμη κι αν παρεμβάλλονται άλλα στοιχεία.

Παράδειγμα HTML:

<div>
  <p>Αυτή η παράγραφος θα γίνει πορτοκαλί.</p>

  <section>
    <p>Και αυτή θα γίνει πορτοκαλί.</p>
  </section>
</div>

<p>Αυτή η παράγραφος δεν βρίσκεται μέσα σε div.</p>

8. Μια πρώτη γνωριμία με το Specificity

Μερικές φορές δύο ή περισσότεροι κανόνες CSS επιλέγουν το ίδιο στοιχείο και ορίζουν διαφορετικές τιμές για την ίδια ιδιότητα.

Τότε παίζει ρόλο η ειδικότητα (specificity) των selectors.

Για παράδειγμα:

p {
  color: blue;
}

.note {
  color: green;
}

#special {
  color: red;
}

Αν έχουμε το παρακάτω στοιχείο:

<p class="note" id="special">
  Ποιο χρώμα θα εμφανιστεί;
</p>

Το κείμενο θα εμφανιστεί κόκκινο, επειδή ο ID Selector έχει μεγαλύτερη ειδικότητα από τον Class Selector και τον Element Selector.

Θα ασχοληθούμε αναλυτικότερα με το specificity σε επόμενο μάθημα.

9. Συνηθισμένα λάθη

• Ξεχνάμε την τελεία πριν από το όνομα μιας κλάσης.
• Ξεχνάμε το σύμβολο # πριν από ένα ID.
• Χρησιμοποιούμε το ίδιο ID σε πολλά στοιχεία.
• Μπερδεύουμε την κλάση με το αναγνωριστικό.
• Ξεχνάμε το κόμμα ανάμεσα στους selectors ενός grouping selector.

10. Ώρα για εξάσκηση!

Τώρα είναι η σειρά σου!

1. Δημιούργησε τρεις παραγράφους και άλλαξε το χρώμα όλων με Element Selector.
2. Δημιούργησε μια κλάση με όνομα highlight και χρησιμοποίησέ την σε δύο διαφορετικά στοιχεία.
3. Δημιούργησε μια επικεφαλίδα με ID main-title και άλλαξε το χρώμα της.
4. Χρησιμοποίησε τον Universal Selector για να εφαρμόσεις box-sizing: border-box.
5. Ομαδοποίησε τους selectors h1 και h2 με ένα κοινό CSS rule.
6. Δοκίμασε τον Descendant Selector div p.

11. Τι μάθαμε σήμερα;

• Element Selector.
• Class Selector.
• ID Selector.
• Universal Selector.
• Grouping Selector.
• Descendant Selector.
• Μια πρώτη γνωριμία με το Specificity.

Τώρα γνωρίζεις πώς να επιλέγεις με ακρίβεια τα στοιχεία μιας ιστοσελίδας και να εφαρμόζεις πάνω τους τους δικούς σου κανόνες CSS!

12. Δοκίμασε τον κώδικά σου στην Παιδική Χαρά!

Άνοιξε το Playground του Jerry's CodeLab και πειραματίσου με τους CSS Selectors:

Jerry's CodeLab
LEARN · EXPERIMENT · CREATE