Recap Challenge
Part of the CSS Mastery section of Coddy's HTML journey — lesson 6 of 43.
Challenge
EasyYou've learned how to combine CSS selectors using descendant, child, adjacent sibling, and general sibling combinators. Now it’s time to put everything into practice!
- Style all
<p>elements that are direct children inside the<div>with the class.roomsusing turquoise blue (#40e0d0). - Style all
<p>elements that are descendants of the<div>with the class.facilitiesusing seafoam green (#2e8b57). - Style every
<p>element that comes after a<div>with sandy beige (#f4a300).
Try it yourself
<!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>All lessons in CSS Mastery
1Selector Mastery – Combination
IntroductionDescendant SelectorChild SelectorAdjacent Sibling SelectorGeneral Sibling SelectorRecap Challenge