Appliquer un style aux éléments h1 à l'intérieur d'une div en CSS

La question est de savoir comment appliquer un style à tous les éléments h1 à l'intérieur d'une div. La bonne réponse est "div > h1 {...}". Cela est connu comme un sélecteur descendant en CSS. En CSS, un sélecteur descendant est une combinaison de deux sélecteurs où le premier sélecteur est défini en tant que parent et le second comme enfant.

Dans cet exemple, div est le sélecteur du parent (ou de l'élément externe) et h1 est le sélecteur de l'enfant (ou de l'élément interne). Le symbole ">" est utilisé pour lier ces deux sélecteurs. Il indique que le style spécifié est à appliquer aux éléments h1 qui sont des enfants directs de l'élément div.

Voyons un exemple pratique de cela :

div > h1 {
  color: red
}

Avec cet extrait de code, tous les éléments h1 qui se trouvent directement à l'intérieur d'une div auront le texte en rouge. Les éléments h1 qui ne sont pas des enfants directs d'une div (c'est-à-dire ceux qui sont peut-être à l'intérieur d'un autre élément à l'intérieur de la div) ne seront pas affectés par ce style.

Il est important de noter que le sélecteur descendant direct (>) est différent du sélecteur descendant général (espace). Si vous utilisez "div h1 {...}" (remarquez l'espace au lieu du ">"), le style s'appliquera à tous les éléments h1 à l'intérieur de la div, qu'ils soient des enfants directs ou non.

En conclusion, le sélecteur descendant direct div > h1 {...} est un outil précieux pour cibler spécifiquement des éléments dans votre structure HTML et pour appliquer des styles de manière sélective.