Πώς χρησιμοποιούμε έναν επιλεκτή σε CSS ή JavaScript…

Στο CSS, οι επιλεκτές δείχνουν σε ποια στοιχεία HTML θα εφαρμοστούν τα στυλ. Στην JavaScript, χρησιμοποιούνται για την επιλογή στοιχείων DOM.

Οι κύριοι τύποι CSS επιλεκτών:

Τύπος επιλεκτή: Επιλέγει όλα τα στοιχεία ενός συγκεκριμένου τύπου.
```
div {
  /* στυλ για όλα τα <div> */
}
```
Επιλεκτής κλάσης: Επιλέγει στοιχεία με μια συγκεκριμένη κλάση.
```
.η-κλάση-μου {
  /* στυλ για στοιχεία με κλάση "η-κλάση-μου" */
}
```
Επιλεκτής ID: Επιλέγει το στοιχείο με ένα συγκεκριμένο ID (πρέπει να είναι μοναδικό).
```
#το-δικό-μου {
  /* στυλ για το στοιχείο με ID "το-δικό-μου" */
}
```
Καθολικός επιλεκτής: Επιλέγει όλα τα στοιχεία.
```
* {
  /* στυλ για όλα τα στοιχεία */
}
```
Συνδυαστές: Συνδυάζουν επιλεκτές.
- Υπο-στοιχείο ( ): div p - επιλέγει όλα τα <p> μέσα σε <div>.
- Άμεσο παιδί (>): div > p - επιλέγει όλα τα <p> που είναι άμεσα παιδιά του <div>.
- Συγγενές αδελφάκι (+): h2 + p - επιλέγει το πρώτο <p> που ακολουθεί άμεσα το <h2>.
- Γενικό αδελφάκι (~): h2 ~ p - επιλέγει όλα τα <p> που ακολουθούν το <h2>.

Στην JavaScript, για την επιλογή στοιχείων DOM, χρησιμοποιούνται οι μέθοδοι querySelector και querySelectorAll.

querySelector: Επιστρέφει το πρώτο στοιχείο που ταιριάζει με τον καθορισμένο επιλεκτή CSS.

// Επιλέγει το πρώτο στοιχείο με κλάση "η-κλάση-μου"
const element = document.querySelector('.η-κλάση-μου');

querySelectorAll: Επιστρέφει μια NodeList (παρόμοια με πίνακα) όλων των στοιχείων που ταιριάζουν με τον επιλεκτή CSS.
```
// Επιλέγει όλα τα `<div>` στοιχεία
const elements = document.querySelectorAll('div');
```

Παράδειγμα χρήσης σε JavaScript:

// Βρίσκει ένα κουμπί με ID
const toDimiourgo = document.querySelector('#to-dimiourgo');

// Προσθέτει χειριστή συμβάντος κλικ
if (toDimiourgo) {
  toDimiourgo.addEventListener('click', () => {
    alert('Το κουμπί πατήθηκε!');
  });
}

// Βρίσκει όλα τα στοιχεία λίστας με κλάση "list-item"
const listaStholia = document.querySelectorAll('.list-item');

// Αλλάζει το κείμενο κάθε στοιχείου λίστας
listaStholia.forEach(item => {
  item.textContent = 'Ενημερωμένο κείμενο';
});

Η σχέση μεταξύ CSS επιλεκτών και της χρήσης τους στην JavaScript με querySelector/querySelectorAll είναι άμεση. Μπορείτε να χρησιμοποιήσετε τους ίδιους CSS επιλεκτές που χρησιμοποιείτε στα στυλ για να επιλέξετε στοιχεία στην JavaScript.

Πώς χρησιμοποιούμε έναν επιλεκτή σε CSS ή JavaScript;