CSS Group Selector — exercises and bug fixes
5 hands-on exercises and 5 find-the-bug challenges for the CSS Group Selector lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Exercises(5)
- 1
Group two elements
easy10 minMake both p and span red with one rule.
- 2
Group a class and an id
easy10 minGive .text and #one the same green colour.
- 3
Group three selectors
easy10 minZero the margin on div, p and span.
- 4
Group with a shared border
easy10 minGive .card and .text a 2px solid border.
- 5
Group then override
medium10 minGroup both blue, then make the span red.
Find the bug(5)
- 1
Fix the missing comma
easy8 minWithout a comma this becomes a descendant selector.
- 2
Fix the trailing comma
easy8 minA dangling comma makes the whole selector list invalid.
- 3
Fix the invalid member
easy8 minOne bad selector in older engines can void the group — use valid ones.
- 4
Fix the duplicated rules
easy8 minThree separate rules should be one group.
- 5
Fix the group that lost a member
easy8 minThe span was dropped from the group.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspace