Make an element a container — practice exercise

What you'll be asked to do

1. 1.Make an element a containerexercise · easy · 10 min

   Let #wrap be queried on its inline size.

   Passes when: Let #wrap be queried on its inline size.

2. 2.Query the containerexercise · easy · 10 min · practice plan

   When #wrap is 500px or narrower, make #text purple.

   Passes when: When #wrap is 500px or narrower, make #text purple.

3. 3.Name a containerexercise · easy · 10 min · practice plan

   Name #wrap "card" and query it by that name.

   Passes when: Name #wrap "card" and query it by that name.

4. 4.Use the container shorthandexercise · easy · 10 min · practice plan

   Set the name and type together with the container shorthand.

   Passes when: Set the name and type together with the container shorthand.

5. 5.Restyle a component by its boxexercise · medium · 10 min · practice plan

   In a narrow card, stack #box and shrink #text.

   Passes when: In a narrow card, stack #box and shrink #text.

6. 6.Fix the missing container-typebug fix · easy · 8 min

   Nothing can be queried until the element opts in.

   Passes when: Nothing can be queried until the element opts in.

7. 7.Fix the container that opted outbug fix · easy · 8 min · practice plan

   The default `normal` is not a queryable container.

   Passes when: The default `normal` is not a queryable container.

8. 8.Fix the name mismatchbug fix · easy · 8 min · practice plan

   The query names a container that does not exist.

   Passes when: The query names a container that does not exist.

9. 9.Fix the shorthand separatorbug fix · easy · 8 min · practice plan

   The container shorthand separates name and type with a slash.

   Passes when: The container shorthand separates name and type with a slash.

10. 10.Fix the element querying itselfbug fix · easy · 8 min · practice plan

    A container cannot be styled by its own query — put the type on the parent.

    Passes when: A container cannot be styled by its own query — put the type on the parent.

Between them these tasks cover container-type, @container and Named containers.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.