Sélecteur contextuel en CSS

Le sélecteur contextuel, représenté par la commande espace (' '), permet de sélectionner les balises imbriquées dans un parent donné

Syntaxe

csssélecteur1 sélecteur2 {
  
}

Exemple

Adressons-nous à toutes les balises p à l'intérieur des balises div et colorons-les en rouge :

html<div>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

cssdiv p {
  color: red;
}

Результат:

Exemple

Adressons-nous à toutes les balises p à l'intérieur de l'élément avec #elem et colorons-les en rouge :

html<div id="elem">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

css#elem p {
  color: red;
}

Результат:

Exemple

Adressons-nous à toutes les balises p à l'intérieur des éléments avec la classe .block et colorons-les en rouge :

html<div class="block">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

css.block p {
  color: red;
}

Результат:

Exemple

Adressons-nous à toutes les balises b à l'intérieur des balises p, elles-mêmes situées à l'intérieur des balises div et colorons-les en rouge :

html<div>
  <p>
    text <b>+</b>
  </p>
</div>

cssdiv p b {
  color: red;
}

Результат:

Voir aussi