Comment sélectionnez-vous tous les éléments <p> à l'intérieur d'un élément <div> ?

Sélection des éléments HTML avec CSS : div p

La question posée concerne la manière de sélectionner tous les éléments <p> (paragraphe) à l'intérieur d'un élément <div> (division) en CSS (Cascading Style Sheets). La réponse correcte est div p.

Dans le langage CSS, pour cibler tous les éléments <p> qui sont des descendants (directs ou indirects) de <div>, nous utilisons la combinaison de sélecteurs div p. Cela signifie que tous les éléments <p> qui se trouvent à l'intérieur d'un élément <div>, quels que soient leur niveau ou leur position, seront sélectionnés.

Voici un exemple pour illustrer ce point :

<div>
  <p>Ceci est un paragraphe dans une div.</p>
  <div>
    <p>Ce paragraphe est également dans une div, mais à un niveau plus profond.</p>
  </div>
</div>
div p {
  color: red;
}

Dans cet exemple, tous les paragraphes présents à l'intérieur de <div>, même ceux qui sont dans une autre <div> enfant, auront une couleur de texte rouge.

Il est important de noter que cette sélection est différente de div > p. Ce dernier sélecteur ne cible que les éléments <p> qui sont des enfants directs de <div>, et non les descendants à des niveaux plus profonds.

La manière de sélectionner des éléments est l'une des caractéristiques les plus puissantes de CSS, permettant de contrôler précisément l'apparence de chaque élément sur une page Web. C'est une partie essentielle de la conception de sites web attractifs et fonctionnels.

Trouvez-vous cela utile?