All repair missions / Mission 02
Fix this page
Style the right message
Find why the highlighted message keeps the wrong colour.
Your goal
Make the featured message orange (#ff7700), while the ordinary message stays muted (#b4b1c4). Keep both messages visible.
Edit a short HTML fragment or CSS rules. Changes apply when you press Update preview or Check my repair. Scripts, links, images and external resources are excluded from this small practice area. Edits stay in this page’s memory; reloading starts again.
Your working preview
Check your repair when you are ready.
Read one possible solution
<section>
<h2>Small details matter</h2>
<p class="message">An ordinary message.</p>
<p class="message featured">This one should be orange.</p>
</section>.message { color: #b4b1c4; }
.message.featured { color: #ff7700; }The space in .message .featured looks for a descendant. .message.featured matches an element with both classes. A simpler .featured selector works too.
Starting code and all hints
<section>
<h2>Small details matter</h2>
<p class="message">An ordinary message.</p>
<p class="message featured">This one should be orange.</p>
</section>.message { color: #b4b1c4; }
.message .featured { color: #ff7700; }- Does featured belong to a child element or to the same paragraph?
- A space means “find a descendant”. Both classes are on one element here.
- Try .message.featured without the space, or target .featured directly.