Skip to main content

CSS Attribute Selectors — exercises and bug fixes

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

    Match attribute presence

    easy10 min

    Style any element that has a data-role attribute.

  2. 2

    Match an exact value

    easy10 min

    Style elements whose data-role is exactly primary.

  3. 3

    Match a prefix

    easy10 min

    Style elements whose data-role starts with "prim".

  4. 4

    Match a suffix

    easy10 min

    Style elements whose data-role ends with "ary".

  5. 5

    Match a substring

    medium10 min

    Style elements whose data-role contains "rima".

Find the bug(5)

  1. 1

    Fix the missing brackets

    easy8 min

    Attribute selectors need square brackets.

  2. 2

    Fix the wrong attribute value

    easy8 min

    The value in the selector does not match the markup.

  3. 3

    Fix the prefix operator

    easy8 min

    A prefix match uses ^=, not =^.

  4. 4

    Fix the suffix operator

    easy8 min

    ^= matches the start of the value; a suffix match needs $=.

  5. 5

    Fix the unquoted value with a dash

    easy8 min

    Values containing dashes must be quoted.

Ready to write the code?

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

Open the workspace