Sélection d'Éléments de Manière Simple

Pour appliquer des styles, il est nécessaire d’indiquer à CSS quels éléments HTML cibler. Cela se fait à l’aide de sélecteurs. Dans ce chapitre, nous nous concentrons sur les trois sélecteurs les plus importants : le sélecteur de balise, le sélecteur de classe et le sélecteur d’identifiant.

Sélecteur de balise

Un sélecteur de balise cible tous les éléments d’une balise HTML spécifique.
Exemple HTML :

<p>It was all in my head.</p>

Exemple CSS :

p {
  color: purple;
  font-size: 36px;
  background-color: pink;
}

Cette règle s’applique à chaque élément <p> de la page.

Utiliser les sélecteurs de balise lorsque vous souhaitez un style cohérent pour tous les éléments de ce type.

Sélecteur de classe

Un sélecteur de classe cible les éléments partageant le même nom de classe.
HTML :

<p class="text">This song is another hit.</p>

Dans le CSS, référencer le nom de la classe avec un point (.) pour définir les styles :

.text {
  color: red;
  font-size: 24px;
  background-color: wheat;
}

Seuls les éléments avec class="text" reçoivent ces styles.

Les sélecteurs de classe sont le type de sélecteur le plus couramment utilisé dans les projets réels car ils permettent un style flexible et réutilisable.

Classes multiples

Un élément peut avoir plusieurs classes.
HTML :

<p class="text font">We test multiple class names</p>

CSS :

.text {
  color: navy;
}

.font {
  font-size: 24px;
}

Si un élément possède les deux classes, il reçoit les styles des deux sélecteurs.

Cela rend le stylage basé sur les classes puissant.

L’élément <p> avec les classes text et font reçoit les styles des deux sélecteurs. La classe text définit la couleur sur navy, et la classe font définit la taille de police à 24px.

Sélecteur d’ID

Un sélecteur d’ID cible un élément unique.

Dans le HTML, ajouter un attribut id à un élément :

<p id="title">Choose from different themes.</p>

Dans le CSS, référencer l’ID avec un dièse (#) pour définir les styles :

#title {
  font-weight: 500;
  font-size: 20px;
}

Les IDs doivent être uniques sur une page.

Bien que les IDs puissent être utilisés pour le style, les classes sont généralement préférées pour la cohérence et la réutilisabilité.