Comment utiliser un sélecteur en CSS ou JavaScript…

En CSS, les sélecteurs indiquent quels éléments HTML appliquer pour styliser. En JavaScript, ils sont utilisés pour sélectionner des éléments du DOM.

Principaux types de sélecteurs CSS :

Sélecteur de type : Sélectionne tous les éléments d’un type spécifié.
```
div {
  /* styles pour tous les <div> */
}
```

Sélecteur de classe : Sélectionne les éléments avec une classe spécifique.

.ma-classe {
  /* styles pour les éléments avec la classe "ma-classe" */
}

Sélecteur d’ID : Sélectionne l’élément avec un ID spécifique (doit être unique).
```
#mon-id {
  /* styles pour l’élément avec l’ID "mon-id" */
}
```
Sélecteur universel : Sélectionne tous les éléments.
```
* {
  /* styles pour tous les éléments */
}
```
Combinateurs : Combinent des sélecteurs.
- Descendant ( ): div p - sélectionne tous les <p> à l’intérieur de <div>.
- Enfant direct (>): div > p - sélectionne tous les <p> qui sont enfants directs de <div>.
- Frère adjacent (+): h2 + p - sélectionne le premier <p> qui suit immédiatement <h2>.
- Frère général (~): h2 ~ p - sélectionne tous les <p> qui suivent <h2>.

En JavaScript, pour sélectionner des éléments du DOM, on utilise les méthodes querySelector et querySelectorAll.

querySelector: Renvoie le premier élément correspondant au sélecteur CSS spécifié.

// Sélectionne le premier élément avec la classe "ma-classe"
const element = document.querySelector('.ma-classe');

querySelectorAll: Renvoie une NodeList (similaire à un tableau) de tous les éléments correspondant au sélecteur CSS.
```
// Sélectionne tous les éléments `<div>`
const elements = document.querySelectorAll('div');
```

Exemple d’utilisation en JavaScript :

// Trouver un bouton par ID
const monBouton = document.querySelector('#mon-bouton');

// Ajouter un gestionnaire d’événement clic
if (monBouton) {
  monBouton.addEventListener('click', () => {
    alert('Bouton cliqué !');
  });
}

// Trouver tous les éléments de liste avec la classe "liste-item"
const itemsListe = document.querySelectorAll('.liste-item');

// Modifier le texte de chaque élément de la liste
itemsListe.forEach(item => {
  item.textContent = 'Texte mis à jour';
});

La relation entre les sélecteurs CSS et leur utilisation en JavaScript avec querySelector/querySelectorAll est directe. Vous pouvez utiliser les mêmes sélecteurs CSS que dans les styles pour sélectionner des éléments en JavaScript.

Comment utiliser un sélecteur en CSS ou JavaScript?