Why nesting mirrors HTML structure in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to nest the p style inside the article style.

SASS

article {
  color: blue;
  [1] {
    font-size: 1.2rem;
  }
}

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

A.p

Bparagraph

C#p

Dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using class selector '.p' instead of tag selector 'p'.

Using id selector '#p' which is incorrect here.

In Sass, nesting selectors inside each other mirrors the HTML structure. Here, p is nested inside article to style paragraphs inside articles.

2fill in blank

medium

Complete the code to nest the li style inside the ul style.

SASS

ul {
  list-style: none;
  [1] {
    padding: 0.5rem;
  }
}

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

Ali

B.li

Clist-item

D#li

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.li' or '#li' instead of 'li'.

Using a made-up selector like 'list-item'.

Nesting li inside ul matches the HTML where list items are inside unordered lists.

3fill in blank

hard

Fix the error in nesting the span inside button.

SASS

button {
  background: green;
  [1] {
    color: white;
  }
}

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

A#span

Bspan

C.button

Dbutton

Attempts:

3 left

💡 Hint

Common Mistakes

Using class or id selectors instead of the tag name.

Nesting the same selector 'button' inside itself.

To style span inside button, nest the tag span directly. Using '.button' or '#span' is incorrect here.

4fill in blank

hard

Fill both blanks to nest h2 and em inside section correctly.

SASS

section {
  background: lightgray;
  [1] {
    font-weight: bold;
    [2] {
      font-style: italic;
    }
  }
}

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

Ah2

Bem

Cspan

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong tags like 'div' or 'span' instead of 'h2' or 'em'.

Swapping the order of nested tags.

The h2 is nested inside section, and em is nested inside h2, matching the HTML structure.

5fill in blank

hard

Fill all three blanks to nest nav, ul, and li correctly.

SASS

[1] {
  background: #eee;
  [2] {
    padding: 0;
    [3] {
      list-style: none;
    }
  }
}

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

Anav

Bul

Cli

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'section' instead of 'nav' for the outer tag.

Swapping 'ul' and 'li' positions.

Using unrelated tags like 'div'.

The nav contains ul, which contains li, matching the HTML structure and showing how nesting in Sass mirrors HTML.