Le sélecteur universel peut être utile dans divers cas de figure :

1. Réinitialisation CSS : Il est courant de l'utiliser en début de feuille de style pour réinitialiser les styles par défaut des navigateurs. Par exemple, pour supprimer les marges et les rembourrages par défaut.

   * {
     margin: 0;
     padding: 0;
   }
   Copy

2. Ajouter des Styles Globaux : Vous pouvez utiliser le sélecteur universel pour définir des styles globaux qui s'appliqueront à tous les éléments. Par exemple, définir une police de caractères de base pour tout le contenu.

   * {
     font-family: Arial, sans-serif;
   }
   Copy

3. Débug et Aperçu : Lors du débug d'un site web, le sélecteur universel peut être utilisé pour ajouter des bordures ou des arrière-plans colorés temporaires aux éléments, ce qui facilite la détection des problèmes d'agencement.

   * {
     border: 1px solid red;
   }
   Copy

Bien que le sélecteur universel puisse être puissant, il peut également entraîner des performances médiocres si utilisé de manière excessive. Il est préférable de l'utiliser avec parcimonie et de l'appliquer uniquement lorsque cela est nécessaire.

Lorsque vous utilisez le sélecteur universel, assurez-vous de tester vos styles sur différents éléments pour éviter des effets indésirables. Il est recommandé de combiner le sélecteur universel avec d'autres sélecteurs plus spécifiques pour obtenir un meilleur contrôle sur vos styles.

En résumé, le sélecteur universel (*) en CSS est un outil puissant pour appliquer des styles globaux ou pour réinitialiser les styles par défaut des navigateurs. Cependant, il doit être utilisé avec prudence pour éviter des effets indésirables sur la mise en page et les performances du site web.

Le sélecteur universel peut être utilisé en combinaison avec des sélecteurs de type pour cibler tous les éléments enfants d'un type spécifique dans un conteneur donné. Par exemple, si vous souhaitez cibler tous les éléments p descendants d'un élément avec la classe .article :

.article * {
  /* Styles pour tous les éléments descendants de .article */
}
Copy

Vous pouvez utiliser le sélecteur universel pour sélectionner tous les éléments, puis exclure certains éléments spécifiques en utilisant le sélecteur :not(). Par exemple, pour cibler tous les éléments * sauf ceux avec la classe .no-style :

*:not(.no-style) {
  /* Styles pour tous les éléments div, sauf ceux avec .no-style */
}
Copy

Le sélecteur universel peut également être utilisé pour définir des styles basés sur l'état des éléments. Par exemple, pour styliser tous les éléments * non visités dans un texte :

*:not(:visited) {
  /* Styles pour les liens non visités */
}
Copy

Si vous souhaitez ajouter des marges à tous les éléments de la page, mais que vous voulez exclure certains éléments (par exemple, les éléments avec la classe .no-margin), vous pouvez utiliser le sélecteur universel pour appliquer des marges par défaut, puis annuler ces marges pour les éléments spécifiques :

* {
  margin: 10px;
}

.no-margin {
  margin: 0;
}
Copy

Lors de la création de règles CSS pour les pseudo-éléments ::before et ::after, le sélecteur universel peut être utilisé pour réinitialiser les styles par défaut de ces pseudo-éléments avant de les personnaliser :

*::before,
*::after {
  content: "";
  display: block;
  margin: 0;
  padding: 0;
  /* Styles par défaut réinitialisés */
}
Copy