CSS Combinators — Code Challenge
Put describe relationships between elements into practice. Rebuild the example from its HTML, then compare your result with the CSS solution. Change the content and the viewport before calling it finished.
How it works
- Combinators distinguish descendants, direct children, next siblings, and subsequent siblings. The example targets a direct heading and the paragraph immediately after it.
- Match selectors to the component boundary. Confirm which elements match before changing declaration values.
- Keep interaction cues available to keyboard and touch users as well as mouse users.
Your task
Use the HTML below to explore this rule: Combinators distinguish descendants, direct children, next siblings, and subsequent siblings. The example targets a direct heading and the paragraph immediately after it. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.
Review the CSS solution
.card > h2 { color: #9c4d27; }
h2 + p { border-top: 1px solid #c9d9ca; padding-top: 12px; }
A solution to compare
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<article class="card"><span class="badge">This Saturday</span><h2>Neighbourhood repair club</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
.card > h2 { color: #9c4d27; }
h2 + p { border-top: 1px solid #c9d9ca; padding-top: 12px; }
Combinators distinguish descendants, direct children, next siblings, and subsequent siblings. The example targets a direct heading and the paragraph immediately after it.