Comprendre les sélecteurs CSS et leur utilisation avec JavaScript

▶️ Sélecteurs de base

Les sélecteurs les plus courants sont les sélecteurs de type, de classe et d’ID :

<div id="main"></div>
<p class="highlight">Texte</p>

// Cibler par ID
const main = document.querySelector('#main');

// Cibler par classe
const paragraph = document.querySelector('.highlight');

🔹 Sélecteurs combinés

Il est possible de combiner plusieurs sélecteurs pour affiner sa recherche. Par exemple, cibler un élément avec un ID et une classe, ou encore un type d’élément avec une classe spécifique.

<div id="main" class="container highlight">Contenu</div>

// Un div avec l’ID main ET la classe highlight
const el = document.querySelector('div#main.highlight');

Ce type de sélecteur est très utile lorsqu'on cherche un élément spécifique parmi plusieurs avec des classes similaires.

🔸 Sélecteurs descendants et enfants

On peut cibler des éléments imbriqués avec les sélecteurs descendants (espace) ou enfants directs (>):

<ul class="menu">
  <li>Accueil</li>
  <li>À propos</li>
</ul>

// Tous les <li> dans .menu
const items = document.querySelectorAll('.menu li');

// Seulement les enfants directs
const directItems = document.querySelectorAll('.menu > li');

ℹ️ querySelector VS getElementById / getElementsByClassName

Tu te demandes peut-être pourquoi utiliser querySelector alors qu’il existe déjà des méthodes comme getElementById ou getElementsByClassName.

• getElementById() est rapide et direct, mais ne fonctionne que pour un identifiant unique.
• getElementsByClassName() permet de cibler plusieurs éléments par classe, mais rien de plus.
• querySelector et querySelectorAll acceptent n'importe quel sélecteur CSS, simple ou combiné. C’est beaucoup plus flexible.

Exemple concret : si tu veux sélectionner les éléments ayant une classe .box mais seulement ceux qui sont enfants directs d’une section :

// ✅ OK : querySelectorAll accepte un sélecteur CSS complet
const boxInSection = document.querySelectorAll('section > .box');

// ❌ Impossible avec getElementsByClassName
// const boxInSection = document.getElementsByClassName('box'); // Trop générique

💡 Autre avantage : querySelectorAll retourne une NodeList, compatible avec forEach() sans conversion, contrairement à la collection HTML de getElementsByClassName.

🔹 Sélecteurs d’attribut

Ces sélecteurs permettent de cibler les éléments selon leurs attributs :

<input type="email" required>
<a href="https://example.com" target="_blank">Lien</a>

// Inputs avec l'attribut 'required'
const requiredInputs = document.querySelectorAll('input[required]');

// Liens avec target="_blank"
const newTabLinks = document.querySelectorAll('a[target="_blank"]');

🔸 Pseudo-classes

Les pseudo-classes permettent de viser des éléments selon leur état ou position :

<ul>
  <li>Premier</li>
  <li>Deuxième</li>
</ul>

// Premier élément li dans ul
const firstItem = document.querySelector('ul li:first-child');

// Dernier élément
const lastItem = document.querySelector('ul li:last-child');

🔹 Sélecteurs multiples

On peut cibler plusieurs types d’éléments à la fois avec une liste séparée par des virgules :

// Cibler tous les titres (h1 et h2) et les paragraphes en surbrillance
const elements = document.querySelectorAll('h1, h2, p.highlight');

🔸 Sélecteurs avancés : :nth-child et :not()

Voici des exemples pour des sélections plus spécifiques :

<ul>
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
</ul>

// Tous les éléments impairs
const oddItems = document.querySelectorAll('ul li:nth-child(odd)');

// Tous les éléments qui ne sont PAS .active
const inactive = document.querySelectorAll('li:not(.active)');

⚠️ Pièges courants à éviter

• Ne pas oublier le symbole # pour un ID et . pour une classe dans les sélecteurs CSS.
• Si aucun élément ne correspond, querySelector() retourne null.
• querySelectorAll() retourne une NodeList — attention : ce n'est pas un tableau 100% natif.

const element = document.querySelector('#inexistant');

if (element) {
  // ok
} else {
  console.warn('Aucun élément trouvé.');
}

🔍 Cas d’usage pratiques

Une fois un élément ciblé, on peut :

• modifier son contenu,
• ajouter ou retirer une classe,
• le masquer dynamiquement, etc.

const box = document.querySelector('.box');

// Masquer l'élément
box.style.display = 'none';

// Ajouter une classe
box.classList.add('active');

// Modifier le texte d’un titre
document.querySelector('h1').textContent = 'Nouveau titre';

N'oublie pas que querySelector ne fonctionne que sur le premier élément correspondant. Si tu veux modifier plusieurs éléments, passe par querySelectorAll + une boucle (ou forEach).

💡 Bonnes pratiques

• querySelector retourne le premier élément correspondant.
• querySelectorAll retourne une NodeList (liste d’éléments).
• Utilise forEach sur une NodeList pour itérer facilement.

document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', e => {
    console.log('Bouton cliqué :', e.target);
  });
});

🗒️ Récapitulatif des sélecteurs vus

• #id : sélection par identifiant
• .class : sélection par classe
• element : par nom de balise (ex : div)
• parent > child : enfant direct
• [attribut] : par attribut
• :first-child, :last-child, :nth-child(n) : pseudo-classes
• :not(.classe) : exclusion

Ces sélecteurs sont valables aussi bien en CSS qu’à l’intérieur de querySelector/querySelectorAll.