Συνδυαστές (CSS Combinators)

Με τους combinators μπορούμε να κάνουμε πιο σύνθετες επιλογές συνδυάζοντας περισσότερους από έναν επιλογείς.

Υπάρχουν 4 διαφορετικοί combinators στα CSS.

  • Διάστημα (space) descendant selector
  • > child selector
  • + adjacent sibling selector
  • ~ general sibling selector

Descendant Selector (Διάστημα)

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

Επιλέγει όλα τα p που βρίσκονται μέσα σε div και τους δίνει χρώμα φόντου yellow.

div p { background-color: yellow; }

Child Selector (>)

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

Επιλέγει όλα τα p που είναι άμεσα παιδιά του div.

div > p { background-color: yellow; }

Adjacent Sibling Selector (+)

Επιλέγει όλα τα στοιχεία που είναι τα αμέσως επόμενα αδέλφια (adjacent sibling) ενός συγκεκριμένου στοιχείου.

Επιλέγει όλα τα p που είναι τα αμέσως επόμενα αδέλφια (adjacent sibling) του div.

div + p { background-color: yellow; }

General Sibling Selector (~)

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

Επιλέγει όλα τα p που είναι αδέλφια του div.

div ~ p { background-color: yellow; }