Skip to main content

Nesting & Scope — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Nesting & Scope lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Nest a rule

    easy10 min

    Inside a #wrap rule, nest a p rule that colours the text blue.

  2. 2

    Nest without the ampersand

    easy10 min

    Nest a p rule directly, making it green.

  3. 3

    Nest two levels deep

    easy10 min

    Nest p inside #wrap and make it purple.

  4. 4

    Scope some styles

    easy10 min

    Use @scope on #wrap to colour paragraphs teal.

  5. 5

    Nest a custom property

    medium10 min

    Set --tone on #wrap and use it in a nested p rule.

Find the bug(5)

  1. 1

    Fix the nested rule with no braces

    easy8 min

    A nested rule needs its own declaration block.

  2. 2

    Fix the wrong nested selector

    easy8 min

    The nested rule targets the link instead of the paragraph.

  3. 3

    Fix the misplaced ampersand

    easy8 min

    The ampersand stands for the parent selector and comes first.

  4. 4

    Fix the scope syntax

    easy8 min

    @scope takes its root in parentheses.

  5. 5

    Fix the variable declared too low

    easy8 min

    The custom property must be on the parent to be inherited.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace