Skip to main content

CSS Specificity — exercises and bug fixes

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

    Let the id win

    easy10 min

    Make #one red even though a class rule sets it blue.

  2. 2

    Beat an element rule with a class

    easy10 min

    A class outranks a bare element selector.

  3. 3

    Raise specificity without an id

    easy10 min

    Use a compound selector so the paragraph turns green.

  4. 4

    Win with two classes

    easy10 min

    Two class selectors outrank one.

  5. 5

    Prefer specificity over !important

    medium10 min

    Make #one green using a more specific selector, not !important.

Find the bug(5)

  1. 1

    Fix the class that cannot beat an id

    easy8 min

    An id outranks any number of classes.

  2. 2

    Fix the element rule expected to win

    easy8 min

    The class rule is more specific than the element rule.

  3. 3

    Fix the !important crutch

    easy8 min

    Replace !important with a properly specific selector.

  4. 4

    Fix the selector that never matches

    easy8 min

    The compound selector targets a class the element does not have.

  5. 5

    Fix the over-specific override

    easy8 min

    A tie should be broken by order, not by adding an id.

Ready to write the code?

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

Open the workspace