Défi récapitulatif
Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 6 sur 43.
Défi
FacileVous avez appris à combiner les sélecteurs CSS en utilisant les combinateurs de descendant, d'enfant, de frère adjacent et de frère général. Il est maintenant temps de mettre tout cela en pratique !
- Stylez tous les éléments
<p>qui sont des enfants directs à l'intérieur du<div>avec la classe.roomsen utilisant le bleu turquoise (#40e0d0). - Stylez tous les éléments
<p>qui sont des descendants du<div>avec la classe.facilitiesen utilisant le vert écume (#2e8b57). - Stylez chaque élément
<p>qui suit un<div>avec du beige sable (#f4a300).
Essayez vous-même
<!DOCTYPE html>
<html>
<head>
<title>Recap Challenge</title>
<style>
/* Your CSS solution here */
</style>
</head>
<body>
<section>
<h1>Welcome to Paradise Resort</h1>
<div class="rooms">
<h2>Ocean View Rooms</h2>
<p>Room 101</p>
<p>Room 102</p>
</div>
<div class="facilities">
<h2>Resort Facilities</h2>
<div>
<p>Infinity Pool</p>
<p>Spa & Wellness Center</p>
</div>
<p>Beach Access</p>
</div>
<p>Beachfront Restaurant</p>
<p>Sunset Bar</p>
</section>
</body>
</html>Toutes les leçons de CSS Mastery
1Maîtrise des sélecteurs – Combinaisons
IntroductionSélecteur de descendantSélecteur d'enfantSélecteur de frère adjacentSélecteur de frère généralDéfi récapitulatif7Construire avec CSS Grid
Les bases de GridPlacement d'éléments Grid-rowZones nomméesDéfi récapitulatif2Pseudo-classes interactives
Pseudo-classesEffets de survolEffets de focusStyles actifsDéfi récapitulatif