Come usare un selettore in CSS o JavaScript?

In CSS, i selettori indicano a quali elementi HTML applicare gli stili. In JavaScript, vengono usati per selezionare gli elementi del DOM.

Tipi principali di selettori CSS:

Selettore di tipo: Seleziona tutti gli elementi di un tipo specificato.
```
div {
  /* stili per tutti i <div> */
}
```

Selettore di classe: Seleziona gli elementi con una classe specifica.

.mia-classe {
  /* stili per gli elementi con classe "mia-classe" */
}

Selettore ID: Seleziona l’elemento con un ID specifico (deve essere unico).
```
#mio-id {
  /* stili per l’elemento con ID "mio-id" */
}
```
Selettore universale: Seleziona tutti gli elementi.
```
* {
  /* stili per tutti gli elementi */
}
```
Combinatori: Combinano i selettori.
- Discendente ( ): div p - seleziona tutti i <p> all’interno di <div>.
- Figlio diretto (>): div > p - seleziona tutti i <p> che sono figli diretti di <div>.
- Fratello adiacente (+): h2 + p - seleziona il primo <p> che segue immediatamente <h2>.
- Fratello generale (~): h2 ~ p - seleziona tutti i <p> che seguono <h2>.

In JavaScript, per selezionare gli elementi del DOM, si usano i metodi querySelector e querySelectorAll.

querySelector: Restituisce il primo elemento che corrisponde al selettore CSS specificato.

// Seleziona il primo elemento con classe "mia-classe"
const elemento = document.querySelector('.mia-classe');

querySelectorAll: Restituisce una NodeList (simile a un array) di tutti gli elementi che corrispondono al selettore CSS.
```
// Seleziona tutti gli elementi `<div>`
const elementi = document.querySelectorAll('div');
```

Esempio di utilizzo in JavaScript:

// Trova un pulsante per ID
const mioPulsante = document.querySelector('#mio-pulsante');

// Aggiungi un gestore di evento clic
if (mioPulsante) {
  mioPulsante.addEventListener('click', () => {
    alert('Pulsante cliccato!');
  });
}

// Trova tutti gli elementi di lista con classe "lista-item"
const elementiLista = document.querySelectorAll('.lista-item');

// Cambia il testo di ogni elemento della lista
elementiLista.forEach(item => {
  item.textContent = 'Testo aggiornato';
});

Il rapporto tra i selettori CSS e il loro utilizzo in JavaScript con querySelector/querySelectorAll è diretto. Puoi usare gli stessi selettori CSS che usi negli stili per selezionare gli elementi in JavaScript.