5.3 Οι συνδυαστές (Combinators) στην CSS

Οι συνδυαστές στο CSS εξηγούν τη σχέση μεταξύ των επιλογέων (selectors).

Ένας επιλογέας CSS μπορεί να περιέχει περισσότερους από έναν απλούς επιλογέας. Μεταξύ των απλών επιλογέων, μπορούμε να περιλάβουμε ένα συνδυαστή.

Υπάρχουν τέσσερις διαφορετικοί συνδυαστές στο CSS:

1. Συνδυαστής απόγονος (descendant selector): Συμβολίζεται με κενό διάστημα (space) και επιλέγει τα στοιχεία που είναι παιδιά ή εμφανίζονται μέσα σε ένα άλλο στοιχείο. Παράδειγμα: div p θα επιλέξει όλα τα στοιχεία <p> που εμφανίζονται μέσα σε ένα στοιχείο <div>.
2. Συνδυαστής παιδί (child selector): Συμβολίζεται με το σύμβολο > και επιλέγει τα στοιχεία που είναι άμεσα παιδιά ενός άλλου στοιχείου. Παράδειγμα: div > p θα επιλέξει όλα τα στοιχεία <p> που είναι άμεσα παιδιά ενός στοιχείου <div>.
3. Συνδυαστής γειτονικού αδελφού (adjacent sibling selector): Συμβολίζεται με το σύμβολο + και επιλέγει το επόμενο αδελφό στοιχείο που ακολουθεί αμέσως ένα άλλο στοιχείο. Παράδειγμα: `h1 + pθα επιλέξει το πρώτο στοιχείοπου ακολουθεί αμέσως ένα στοιχείο`.
4. Συνδυαστής γενικού αδελφού (general sibling selector): Συμβολίζεται με το σύμβολο ~ και επιλέγει όλα τα επόμενα αδέλφια στοιχεία που ακολουθούν ένα άλλο στοιχείο. Παράδειγμα: h1 ~ p θα επιλέξει όλα τα στοιχεία <p> που ακολουθούν ένα στοιχείο <h1>.

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

Ο επιλογέας απόγονος (descendant selector) επιλέγει όλα τα στοιχεία που είναι απόγονοι ενός συγκεκριμένου στοιχείου.

Το παρακάτω παράδειγμα επιλέγει όλα τα στοιχεία <p> που βρίσκονται μέσα σε στοιχεία <div>:

div p {
  /* CSS rules for <p> elements inside <div> elements */
}

Με αυτόν τον τρόπο, μπορείτε να εφαρμόσετε κανόνες στιλ για τα στοιχεία <p> που είναι παιδιά ή εμφανίζονται μέσα σε στοιχεία <div>.

Ο επιλογέας παιδί (child selector) επιλέγει όλα τα στοιχεία που είναι άμεσα παιδιά ενός συγκεκριμένου στοιχείου.

[adinserter block=”2″]

Το παρακάτω παράδειγμα επιλέγει όλα τα στοιχεία <p> που είναι άμεσα παιδιά ενός στοιχείου <div>:

div > p {
  /* CSS rules for <p> elements that are direct children of <div> */
}

Με αυτόν τον τρόπο, μπορείτε να εφαρμόσετε κανόνες στιλ για τα στοιχεία <p> που είναι άμεσα παιδιά ενός στοιχείου <div>.

Ο επιλογέας γειτονικού αδελφού (adjacent sibling selector) χρησιμοποιείται για να επιλέξει ένα στοιχείο που βρίσκεται αμέσως μετά από ένα συγκεκριμένο στοιχείο.

Τα αδελφικά στοιχεία πρέπει να έχουν τον ίδιο γονέα, και ο όρος “γειτονικός” σημαίνει “άμεσα ακολουθώντας”.

Το παρακάτω παράδειγμα επιλέγει το πρώτο στοιχείο <p> που βρίσκεται αμέσως μετά από στοιχεία <div>:

div + p {
  /* CSS rules for the first <p> element after <div> elements */
}

Με αυτόν τον τρόπο, μπορείτε να εφαρμόσετε κανόνες στιλ για το πρώτο στοιχείο <p> που ακολουθεί αμέσως μετά από στοιχεία <div>.

Ο επιλογέας γενικού αδελφού (general sibling selector) επιλέγει όλα τα στοιχεία που είναι αδέλφια και ακολουθούν ένα συγκεκριμένο στοιχείο.

Τα αδελφικά στοιχεία πρέπει να έχουν τον ίδιο γονέα.

Το παρακάτω παράδειγμα επιλέγει όλα τα στοιχεία <p> που ακολουθούν ένα στοιχείο <div>:

div ~ p {
  /* CSS rules for <p> elements that follow <div> elements */
}

Με αυτόν τον τρόπο, μπορείτε να εφαρμόσετε κανόνες στιλ για όλα τα στοιχεία <p> που ακολουθούν ένα στοιχείο <div>.