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.

Practice

1. Why does nesting in Sass mirror the HTML structure?

easy

A. To group related styles and make the code easier to read

B. To make the CSS file size larger

C. To confuse developers with complex code

D. To avoid using any selectors in CSS

Solution

1. Step 1: Understand the purpose of nesting

   Nesting groups styles that belong to related HTML elements, reflecting their structure.

2. Step 2: Recognize the benefit of grouping

   This grouping makes the code easier to read and maintain by showing relationships clearly.

3. Final Answer:

   To group related styles and make the code easier to read -> Option A

4. Quick Check:

   Nesting mirrors HTML structure for clarity [OK]

Hint: Think: nesting groups styles like HTML groups elements [OK]

Common Mistakes:

• Thinking nesting increases file size
• Believing nesting hides selectors
• Assuming nesting is for confusing code

2. Which of the following is the correct Sass nesting syntax for styling a nav element containing ul and li elements?

easy

A. nav { ul { li { color: blue; } } }

B. nav > ul > li { color: blue; }

C. nav ul li { color: blue; }

D. nav { ul, li { color: blue; } }

Solution

1. Step 1: Identify correct Sass nesting syntax

   Sass nesting uses curly braces inside each other to mirror HTML structure, like nav { ul { li { ... } } }.

2. Step 2: Compare options

   nav { ul { li { color: blue; } } } uses proper nested blocks. nav ul li { color: blue; } and nav > ul > li { color: blue; } are plain CSS selectors, not Sass nesting. nav { ul, li { color: blue; } } incorrectly nests ul and li together with a comma.

3. Final Answer:

   nav { ul { li { color: blue; } } } -> Option A

4. Quick Check:

   Sass nesting uses nested braces [OK]

Hint: Look for nested curly braces matching HTML tags [OK]

Common Mistakes:

• Using commas to nest multiple selectors incorrectly
• Writing plain CSS selectors instead of nested blocks
• Confusing CSS child selectors with Sass nesting

3. Given this Sass code:

header {
  nav {
    ul {
      li {
        color: red;
      }
    }
  }
}

What is the equivalent CSS output?

medium

A. header, nav, ul, li { color: red; }

B. header nav ul li { color: red; }

C. header > nav > ul > li { color: red; }

D. nav ul li { color: red; }

Solution

1. Step 1: Understand Sass nesting output

   Sass nesting combines selectors by joining them with spaces, reflecting descendant relationships.

2. Step 2: Translate nested selectors

   The nested selectors header { nav { ul { li { ... } } } } become header nav ul li in CSS.

3. Final Answer:

   header nav ul li { color: red; } -> Option B

4. Quick Check:

   Nesting creates combined selectors with spaces [OK]

Hint: Nested blocks join selectors with spaces in CSS output [OK]

Common Mistakes:

• Assuming commas separate selectors in output
• Using child combinators (>) instead of spaces
• Dropping parent selectors in output

4. What is wrong with this Sass nesting code?

.container {
  .item {
    color: blue;
  }
  .item {
    font-weight: bold;
  }
}

medium

A. Missing semicolons after properties

B. Nesting is not allowed inside classes

C. Duplicate nested selectors cause repeated CSS rules

D. Cannot nest more than one level deep

Solution

1. Step 1: Identify duplicate nested selectors

   There are two separate .item blocks nested inside .container, causing repeated CSS rules.

2. Step 2: Understand impact on CSS output

   This duplication creates two separate CSS blocks for .container .item, which can be combined for cleaner code.

3. Final Answer:

   Duplicate nested selectors cause repeated CSS rules -> Option C

4. Quick Check:

   Duplicate nested selectors cause repeated CSS rules [OK]

Hint: Avoid repeating same nested selector inside parent [OK]

Common Mistakes:

• Thinking nesting inside classes is invalid
• Ignoring duplicate selectors cause repeated CSS
• Assuming semicolons are missing

5. You want to style a section with multiple article elements, each containing h2 and p. How does nesting in Sass help you write this cleanly?

hard

A. By using commas to combine unrelated selectors inside section

B. By writing all selectors flat without nesting to avoid confusion

C. By nesting only h2 and ignoring p inside article

D. By nesting article, h2, and p inside section, reflecting HTML structure

Solution

1. Step 1: Understand the HTML structure

   The section contains multiple article elements, each with h2 and p inside.

2. Step 2: Use nesting to mirror this structure

   Nesting article inside section, then h2 and p inside article groups styles clearly and matches HTML.

3. Final Answer:

   By nesting article, h2, and p inside section, reflecting HTML structure -> Option D

4. Quick Check:

   Nesting mirrors HTML for clean code [OK]

Hint: Nest selectors to match HTML tags for clarity [OK]

Common Mistakes:

• Writing all selectors flat losing structure clarity
• Ignoring some nested elements like p
• Using commas to combine unrelated selectors