Τι είναι ο επιλεκτής στο CSS;

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

Υπάρχουν διάφοροι τύποι επιλεκτών:

Τύποι επιλεκτών (Type selectors): Επιλέγουν όλα τα αντίγραφα ενός στοιχείου HTML.
```
p { /* Επιλέγει όλους τους παραγράφους */
  color: blue;
}
```
Επιλεκτές κλάσεων (Class selectors): Επιλέγουν στοιχεία με συγκεκριμένη τιμή στο χαρακτηριστικό class.
```
.highlight { /* Επιλέγει όλα τα στοιχεία με την κλάση "highlight" */
  background-color: yellow;
}
```
Επιλεκτές ταυτοτήτων (ID selectors): Επιλέγουν ένα μοναδικό στοιχείο με συγκεκριμένη τιμή στο χαρακτηριστικό id.
```
#header { /* Επιλέγει το στοιχείο με id "header" */
  font-size: 2em;
}
```

Κατάλληλος επιλεκτής (Universal selector): Επιλέγει όλα τα στοιχεία.

* { /* Επιλέγει όλα τα στοιχεία στη σελίδα */
  margin: 0;
  padding: 0;
}

Επιλεκτές χαρακτηριστικών (Attribute selectors): Επιλέγουν στοιχεία βάσει της ύπαρξης ή της τιμής των χαρακτηριστικών τους.
```
[type="text"] { /* Επιλέγει όλα τα input με type="text" */
  border: 1px solid gray;
}
```
Ψευδο-κλάσεις (Pseudo-classes): Επιλέγουν στοιχεία βάσει της κατάστασής τους.
```
a:hover { /* Επιλέγει το σύνδεσμο κατά το hover */
  text-decoration: underline;
}
```
Ψευδο-στοιχεία (Pseudo-elements): Επιλέγουν συγκεκριμένα μέρη του στοιχείου ή δημιουργούν "ψεύτικα" στοιχεία.
```
p::first-line { /* Επιλέγει την πρώτη γραμμή του παραγράφου */
  font-weight: bold;
}
```

Συνδυαστές (Combinators): Ορίζουν τις σχέσεις μεταξύ των επιλεκτών.

Συνδυαστής	Περιγραφή	Παράδειγμα
Κενό διάστημα ( )	Επιλεκτής απογόνων (Descendant selector)	`div p`
`>`	Επιλεκτής παιδιού (Child selector)	`div > p`
`+`	Επιλεκτής γειτονικού αδελφού (Adjacent sibling selector)	`h1 + p`
`~`	Επιλεκτής γενικού αδελφού (General sibling selector)	`h1 ~ p`

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