Skip to main content

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. 1

    Group two elements

    easy10 min

    Make both p and span red with one rule.

  2. 2

    Group a class and an id

    easy10 min

    Give .text and #one the same green colour.

  3. 3

    Group three selectors

    easy10 min

    Zero the margin on div, p and span.

  4. 4

    Group with a shared border

    easy10 min

    Give .card and .text a 2px solid border.

  5. 5

    Group then override

    medium10 min

    Group both blue, then make the span red.

Find the bug(5)

  1. 1

    Fix the missing comma

    easy8 min

    Without a comma this becomes a descendant selector.

  2. 2

    Fix the trailing comma

    easy8 min

    A dangling comma makes the whole selector list invalid.

  3. 3

    Fix the invalid member

    easy8 min

    One bad selector in older engines can void the group — use valid ones.

  4. 4

    Fix the duplicated rules

    easy8 min

    Three separate rules should be one group.

  5. 5

    Fix the group that lost a member

    easy8 min

    The 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