Grouping Selectors — Code Challenge
Put group selectors with a comma 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
- A selector list applies one declaration block to several independent matches. A comma separates the alternatives; it does not describe an ancestor relationship.
- A selector chooses elements; declarations inside braces assign property values. Inspect one rule at a time in browser developer tools.
- Change one value, preview again, and compare the result with the unstyled markup.
Your task
Use the HTML below to explore this rule: A selector list applies one declaration block to several independent matches. A comma separates the alternatives; it does not describe an ancestor relationship. 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
h2, .badge { color: #8b3d20; }
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 */
h2, .badge { color: #8b3d20; }
A selector list applies one declaration block to several independent matches. A comma separates the alternatives; it does not describe an ancestor relationship.