Styler un parent selon ses enfants — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 2)

Styler un parent selon ses enfants

Sélecteurs · niveau 3 (difficile)

Énoncé

La page ex8-has.html contient deux articles (le premier a une image de couverture, le second non) et un formulaire d'avis (pseudonyme obligatoire, note facultative). Écrire, avec :has(), les règles qui :

entourent d'une bordure en pointillés les articles sans image ;
mettent en gras l'étiquette des champs obligatoires et la font suivre d'un astérisque ;
teintent la ligne du formulaire dont le champ a le focus.

Corrigé


body {
  font-family: system-ui, sans-serif;
}

/* 1. Les articles sans image : bordure en pointillés */
article:not(:has(img)) {
  border: 2px dashed #a8520a;
}

/* 2. L'étiquette d'un champ obligatoire : en gras, suivie d'un astérisque */
p:has(> [required]) label {
  font-weight: bold;
}

p:has(> [required]) label::after {
  content: " *";
  color: #a8520a;
}

/* 3. La ligne du formulaire en cours de saisie */
p:has(> :focus) {
  background-color: #fbe8d5;
}

Pour la règle 1, :has(img) désigne les articles qui contiennent une image, :not() prend le contraire. Pour la règle 3, > :focus limite aux enfants directs. Dans Chromium : bordure none pour le premier article, dashed pour le second ; étiquette « Pseudonyme » en 700 suivie de " *", « Note sur 5 » en 400.