Skip to main content

CSS Combinators — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Combinators 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

    Use a descendant combinator

    easy10 min

    Make paragraphs inside .card red.

  2. 2

    Use a child combinator

    easy10 min

    Target only direct paragraph children of #one.

  3. 3

    Use an adjacent sibling

    easy10 min

    Style the span immediately after the paragraph.

  4. 4

    Use a general sibling

    easy10 min

    Style every span that follows a paragraph.

  5. 5

    Combine two combinators

    medium10 min

    Target a span that is a direct child of #one and follows a p.

Find the bug(5)

  1. 1

    Fix the child combinator used for a descendant

    easy8 min

    The paragraph is not a direct child in every card.

  2. 2

    Fix the missing combinator

    easy8 min

    Two selectors with no space target one element with both.

  3. 3

    Fix the wrong sibling symbol

    easy8 min

    An adjacent sibling uses +, not -.

  4. 4

    Fix the reversed sibling order

    easy8 min

    The span comes after the paragraph, not before.

  5. 5

    Fix the over-nested selector

    easy8 min

    The span is a sibling of the paragraph, not inside it.

Ready to write the code?

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

Open the workspace