2. Les Sélecteurs CSS

Les sélecteurs CSS sont utilisés pour "sélectionner" les éléments HTML auxquels on veut appliquer des styles. Il existe plusieurs types de sélecteurs permettant de cibler des éléments spécifiques, des classes, des identifiants, ou même des groupes d’éléments.

Types principaux de sélecteurs

• Sélecteur universel : * sélectionne tous les éléments.
• Sélecteur de type : sélectionne tous les éléments d’un type donné, par exemple p, h1.
• Sélecteur de classe : sélectionne les éléments ayant une certaine classe, par exemple .menu.
• Sélecteur d’identifiant : sélectionne un élément avec un identifiant unique, par exemple #header.
• Sélecteurs combinés : permettent de combiner plusieurs critères, comme div.menu.

Exemples pratiques

Voici quelques exemples de sélecteurs :

/* Tous les paragraphes */
p {
  color: blue;
}

/* Élément avec id="header" */
#header {
  background-color: orange;
}

/* Tous les éléments avec la classe "menu" */
.menu {
  font-weight: bold;
}

/* Tous les liens à l’intérieur d’une liste */
ul li a {
  text-decoration: none;
}
    

Pourquoi bien comprendre les sélecteurs ?

Une bonne maîtrise des sélecteurs permet d’écrire un CSS clair, efficace et facile à maintenir. Cela permet aussi d’éviter les conflits et d’assurer que vos styles s’appliquent uniquement aux éléments souhaités.

Exercice