Sélecteurs en CSS

Introduction aux Sélecteurs

Les sélecteurs en CSS permettent de cibler et de styliser des éléments HTML en fonction de leur type et/ou de leurs attributs. Pour sélectionner tous les éléments d’une page, on peut utiliser le sélecteur universel :

* {
  /* déclarations ici */
}

Sélection par Type

Le sélecteur d'élément permet de choisir des éléments HTML selon leur nom. La syntaxe est la suivante :

element-name {
  /* déclarations ici */
}

Ici, le type d'élément doit être un élément HTML valide. Par exemple, pour centrer tous les éléments <p> de la page avec une couleur de texte rouge :

p {
  text-align: center;
  color: red;
}

Sélection par Attribut

Le sélecteur de classe permet de cibler les éléments ayant un attribut de classe. Il commence par un point (.) et peut s'appliquer à plusieurs éléments. D'autre part, le sélecteur d'id cible un élément HTML ayant un attribut id, qui est unique sur une page et commence par un dièse (#).

La syntaxe pour les sélecteurs d’id et de classe est la suivante :

#id-name {
  /* déclarations ici */
}
.class-name {
  /* déclarations ici */
}
element[attribute='value'] {
  /* déclarations ici */
}

Pour exemple, les règles suivantes permettent de sélectionner des éléments par id, classe et autres attributs :

#para1 {
  text-align: center;
  color: red;
}
.center {
  text-align: center;
  color: red;
}
li[title='red'] {
  background-color: red;
  color: #fff;
}

Vous pouvez aussi spécifier que seuls certains éléments HTML avec une classe donnée doivent être stylisés. Par exemple, pour centrer le texte des balises <p> avec la classe "center" :

p.center {
  text-align: center;
  color: red;
}

Le Sélecteur de Groupement

Le sélecteur de groupement permet de sélectionner un groupe d’éléments HTML et d'appliquer le même ensemble de styles à chacun d'eux, ce qui réduit la taille du code. La syntaxe est :

elm1, elm2, elm3 {
  /* déclarations ici */
}

Par exemple, pour appliquer un ensemble de styles aux éléments <h1>, <h2> et <p> :

h1, h2, p {
  text-align: center;
  color: red;
}

Conclusion

Les sélecteurs en CSS sont un outil fondamental pour styliser efficacement vos pages web. Que vous choisissiez de cibler par type, classe, id ou groupement, chacun de ces sélecteurs vous aide à structurer vos styles de manière logique et efficace.