Skip to main content

CSS Pseudo Classes — exercises and bug fixes

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

    Style the first child

    easy10 min

    Make the first .card red using :first-child.

  2. 2

    Style by position

    easy10 min

    Use :nth-child(1) to target the first card.

  3. 3

    Exclude with :not()

    easy10 min

    Colour every div that is not #one blue.

  4. 4

    Style the first of a type

    easy10 min

    Target the first paragraph inside #one.

  5. 5

    Combine two pseudo-classes

    medium10 min

    Target the first child that is not a paragraph.

Find the bug(5)

  1. 1

    Fix the single colon count

    easy8 min

    Pseudo-classes use one colon, but this one is misspelled.

  2. 2

    Fix the zero-based index

    easy8 min

    :nth-child() counts from 1, not 0.

  3. 3

    Fix the inverted :not()

    easy8 min

    This excludes the wrong element.

  4. 4

    Fix the wrong element targeted

    easy8 min

    The rule picks the span; the first paragraph was intended.

  5. 5

    Fix the double colon

    easy8 min

    A double colon marks a pseudo-element, not a pseudo-class.

Ready to write the code?

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

Open the workspace