CSS Attribute Selectors Exercises

1.Match attribute presenceexercise · easy · 10 min

Style any element that has a data-role attribute.

Passes when: Style any element that has a data-role attribute.

2.Match an exact valueexercise · easy · 10 min · practice plan

Style elements whose data-role is exactly primary.

Passes when: Style elements whose data-role is exactly primary.

3.Match a prefixexercise · easy · 10 min · practice plan

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

Passes when: Style elements whose data-role starts with "prim".

4.Match a suffixexercise · easy · 10 min · practice plan

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

Passes when: Style elements whose data-role ends with "ary".

5.Match a substringexercise · medium · 10 min · practice plan

Style elements whose data-role contains "rima".

Passes when: Style elements whose data-role contains "rima".

6.Fix the missing bracketsbug fix · easy · 8 min

Attribute selectors need square brackets.

Passes when: Attribute selectors need square brackets.

7.Fix the wrong attribute valuebug fix · easy · 8 min · practice plan

The value in the selector does not match the markup.

Passes when: The value in the selector does not match the markup.

8.Fix the prefix operatorbug fix · easy · 8 min · practice plan

A prefix match uses ^=, not =^.

Passes when: A prefix match uses ^=, not =^.

9.Fix the suffix operatorbug fix · easy · 8 min · practice plan

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

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

10.Fix the unquoted value with a dashbug fix · easy · 8 min · practice plan

Values containing dashes must be quoted.

Passes when: Values containing dashes must be quoted.

Acceptance criteria