Sélecteurs principaux en CSS

1. Sélecteurs par type (Type Selectors)

Les sélecteurs en CSS permettent de sélectionner des éléments HTML et d'appliquer des styles. La connaissance des principaux sélecteurs aide à choisir efficacement et précisément des éléments sur la page, ce qui fait de CSS un outil puissant pour styliser le contenu web. Dans cet article, nous allons examiner les principaux types de sélecteurs : sélecteurs par type (Type Selectors), sélecteurs par classe, sélecteurs par identifiant, sélecteurs groupés et sélecteurs universels.

Les sélecteurs par type sélectionnent tous les éléments d'une certaine balise. Par exemple, si nous devons appliquer des styles à tous les paragraphes sur la page, nous utiliserons le sélecteur par type avec la balise <p>.

p {
  color: blue;
  font-size: 16px;
}

<p>Ce texte sera bleu et de taille 16 pixels.</p>
<p>Deuxième paragraphe avec les mêmes styles.</p>

Les sélecteurs par type sont utiles lorsque vous devez appliquer des styles à tous les éléments d'un certain type, par exemple, à tous les titres ou paragraphes. Ils permettent un contrôle global de l'apparence d'un groupe d'éléments et simplifient la maintenance du site.

2. Sélecteurs par classe (Class Selectors)

Les sélecteurs par classe permettent de sélectionner des éléments avec une certaine valeur d'attribut class. La classe est indiquée par un point (.) devant le nom de la classe. La même classe peut être utilisée pour de nombreux éléments, ce qui permet d'appliquer les mêmes styles à plusieurs éléments.

.highlight {
  background-color: yellow;
  color: blue;
  font-weight: bold;
}

<p class="highlight">Ce texte est mis en surbrillance en bleu sur un fond jaune.</p>
<p>Texte normal sans classe.</p>
<div class="highlight">Ce bloc sera également stylisé avec la classe highlight.</div>

Les sélecteurs par classe sont universels et pratiques, car ils permettent de créer des styles qui peuvent être appliqués à différents éléments. Les classes sont particulièrement utiles lorsque vous devez styliser un groupe d'éléments non liés.

3. Sélecteurs par identifiant (ID Selectors)

Les sélecteurs par identifiant sélectionnent des éléments avec une certaine valeur d'attribut id. L'identifiant est indiqué par le symbole # devant le nom. Contrairement aux classes, un ID doit être unique sur la page, ce qui en fait un choix idéal pour styliser des éléments uniques, tels qu'un titre ou une barre de navigation.

#main-header {
  font-size: 24px;
  color: green;
  text-align: center;
}

<h1 id="main-header">Titre de la page</h1>
<p>Ce paragraphe ne sera pas affecté par le sélecteur par identifiant.</p>

Les sélecteurs par identifiant appliquent un style uniquement à un seul élément sur la page, c'est pourquoi ils sont utilisés pour mettre en évidence des éléments uniques avec des styles spécifiques.

4. Sélecteurs groupés (Group Selectors)

Les sélecteurs groupés permettent d'appliquer les mêmes styles à plusieurs éléments. Cela se fait en utilisant une virgule pour regrouper plusieurs sélecteurs dans une même règle CSS. Les sélecteurs groupés simplifient le code, car ils permettent de définir des styles communs pour plusieurs types d'éléments.

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

<h1>Titre de premier niveau</h1>
<h2>Titre de deuxième niveau</h2>
<h3>Titre de troisième niveau</h3>
<p>Ce texte ne sera pas affecté par le sélecteur groupé.</p>

Les sélecteurs groupés aident à réduire le code CSS et à simplifier la stylisation, surtout lorsque vous devez appliquer les mêmes propriétés à différents éléments, comme les titres de différents niveaux.

5. Sélecteurs universels (Universal Selectors)

Le sélecteur universel est désigné par une étoile (*) et sélectionne tous les éléments sur la page. C'est un outil puissant qui permet de définir rapidement des styles de base pour tous les éléments, par exemple, pour établir des marges identiques ou définir une police par défaut. Le sélecteur universel est utile pour réinitialiser les styles (reset), lorsque vous devez supprimer les marges et espacements par défaut du navigateur pour un contrôle plus précis des styles.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h1>Titre</h1>
<p>Paragraphe de texte sans marges et espacements.</p>
<div>Conteneur sans marges et espacements.</div>

Dans cet exemple, le sélecteur universel réinitialise les marges et espacements pour tous les éléments, ce qui aide à maintenir la cohérence des styles sur la page. Cette pratique est souvent utilisée au début du code CSS pour créer un style uniforme.