Minimizing nesting depth in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all p elements inside .container.

SASS

.container {
  [1] {
    color: blue;
  }
}

Drag options to blanks, or click blank then click option'

A#p

B& p

C.p

Dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using & p adds unnecessary nesting.

Using class or ID selectors like .p or #p won't select p tags.

Use p to select all paragraph elements inside .container without extra nesting.

2fill in blank

medium

Complete the code to style li elements inside .menu without nesting inside ul.

SASS

.menu {
  [1] {
    font-weight: bold;
  }
}

Drag options to blanks, or click blank then click option'

Ali

Bul li

C& li

Dul > li

Attempts:

3 left

💡 Hint

Common Mistakes

Using ul li adds unnecessary nesting.

Using & li requires nesting inside ul.

Directly using li inside .menu minimizes nesting and styles all list items.

3fill in blank

hard

Fix the error in the code to avoid deep nesting for .card .title styling.

SASS

.card {
  [1] {
    font-size: 1.5rem;
  }
}

Drag options to blanks, or click blank then click option'

A&.title

B.title

C& .title

D.card .title

Attempts:

3 left

💡 Hint

Common Mistakes

Using .card .title repeats the parent selector unnecessarily.

Using .title alone may not scope styles correctly.

Using & .title correctly nests .title inside .card without repeating the parent selector.

4fill in blank

hard

Fill both blanks to create a flat style for .nav and its a links without deep nesting.

SASS

.nav {
  [1] {
    color: red;
  }
  [2] {
    text-decoration: none;
  }
}

Drag options to blanks, or click blank then click option'

Abackground-color: #eee;

Ba

C& a

Dcolor: blue;

Attempts:

3 left

💡 Hint

Common Mistakes

Using a alone in the first blank is invalid CSS.

Using color: blue; in the first blank does not set background color.

Set background color directly on .nav and style links with & a to avoid extra nesting.

5fill in blank

hard

Fill all three blanks to create a minimal nesting style for .footer, its p tags, and strong inside p.

SASS

.footer {
  [1]
  [2] {
    font-size: 1rem;
    [3] {
      font-weight: bold;
    }
  }
}

Drag options to blanks, or click blank then click option'

Apadding: 2rem;

Bp

C& strong

D& p

Attempts:

3 left

💡 Hint

Common Mistakes

Using p alone without & in the second blank causes deeper nesting.

Using strong without & in the third blank breaks selector chaining.

Set padding on .footer, style paragraphs with & p, and bold strong inside paragraphs with & strong to keep nesting shallow.