Basic selector nesting in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What CSS does this Sass code produce?

Given the Sass code below, what is the resulting CSS output?

SASS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
  }
}

A

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
  }
}

B

ul nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
li nav {
  display: inline-block;
}
a nav {
  text-decoration: none;
}

C

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  text-decoration: none;
}

D

nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav > li {
  display: inline-block;
}
nav > a {
  text-decoration: none;
}

💡 Hint

Remember that nested selectors in Sass combine the parent selector with the nested one.

In Sass, nesting selectors inside another selector combines them by placing the parent selector before the nested one, separated by a space. So 'nav { ul { ... } }' becomes 'nav ul { ... }' in CSS.

❓ selector

intermediate

Which option shows the correct nested Sass for this CSS?

Given this CSS, which Sass code would produce it? nav ul { margin: 0; } nav ul li { display: block; } nav ul li a { color: blue; }

A

nav {
  ul {
    margin: 0;
  }
  li {
    display: block;
    a {
      color: blue;
    }
  }
}

B

nav {
  ul {
    margin: 0;
    li {
      display: block;
      a {
        color: blue;
      }
    }
  }
}

C

nav ul {
  margin: 0;
  li {
    display: block;
    a {
      color: blue;
    }
  }
}

D

nav {
  ul {
    margin: 0;
  }
  ul li {
    display: block;
    a {
      color: blue;
    }
  }
}

💡 Hint

Think about how nesting inside 'ul' inside 'nav' matches the CSS selectors.

Nesting 'li' inside 'ul' inside 'nav' in Sass creates selectors like 'nav ul li' in CSS. Further nesting 'a' inside 'li' inside 'ul' inside 'nav' creates 'nav ul li a'.

❓ selector

advanced

What is the output CSS of this Sass with parent selector &?

Consider this Sass code: .button { color: white; &-primary { background: blue; } &-secondary { background: gray; } }

A

.button {
  color: white;
}
&-primary {
  background: blue;
}
&-secondary {
  background: gray;
}

B

.button {
  color: white;
  -primary {
    background: blue;
  }
  -secondary {
    background: gray;
  }
}

C

.button {
  color: white;
}
-primary {
  background: blue;
}
-secondary {
  background: gray;
}

D

.button {
  color: white;
}
.button-primary {
  background: blue;
}
.button-secondary {
  background: gray;
}

💡 Hint

The & symbol in Sass means 'use the parent selector here'.

Using &-primary inside .button means the selector becomes .button-primary. Similarly for &-secondary. The base .button keeps its styles.

❓ layout

advanced

How does this nested Sass affect layout with Flexbox?

Given this Sass code: .container { display: flex; .item { flex: 1; &:hover { background: lightgray; } } }

A The container becomes a flex container. Each .item inside it shares space equally and changes background on hover.

B The container is block by default. .item elements float left and no hover effect.

C The container uses grid layout. .item elements have fixed width and no hover effect.

D The container is flex but .item elements do not share space equally and hover does nothing.

💡 Hint

Flexbox distributes space among children with flex: 1. &:hover applies styles on hover.

display:flex on .container makes it a flex container. .item with flex:1 means all items share space equally. &:hover inside .item applies background color on hover.

❓ accessibility

expert

Which nested Sass code best supports keyboard focus styles accessibly?

You want to style a button and its focus state for keyboard users. Which Sass code correctly nests and uses :focus-visible for accessibility? Options:

A

.btn {
  background: blue;
  color: white;
  &:focus-visible {
    outline: 3px solid orange;
  }
}

B

.btn {
  background: blue;
  color: white;
  &:focus {
    outline: none;
  }
}

C

.btn {
  background: blue;
  color: white;
  &:hover {
    outline: 3px solid orange;
  }
}

D

.btn {
  background: blue;
  color: white;
  &:active {
    outline: 3px solid orange;
  }
}

💡 Hint

Use :focus-visible to show focus outlines only when keyboard navigation is used.

:focus-visible applies styles only when the element is focused via keyboard, improving accessibility by not showing outlines on mouse clicks. &:focus-visible nests this selector properly in Sass.

Practice

1. What does the & symbol represent in Sass nesting?

easy

A. The parent selector in the nested rule

B. A new CSS class

C. A CSS property

D. A comment in Sass

Solution

1. Step 1: Understand the role of & in Sass

   The & symbol is used inside nested selectors to refer to the parent selector.

2. Step 2: Apply this understanding to nesting

   When you nest selectors, & helps avoid repeating the parent selector by representing it directly.

3. Final Answer:

   The parent selector in the nested rule -> Option A

4. Quick Check:

   & means parent selector [OK]

Hint: Remember & means 'this selector' inside nesting [OK]

Common Mistakes:

• Thinking & creates a new class
• Confusing & with CSS properties
• Assuming & is a comment

2. Which of the following is the correct Sass syntax to nest a .button class inside a .container class?

easy

A. .container .button { color: blue; }

B. .container > .button { color: blue; }

C. .container { .button { color: blue; } }

D. .container, .button { color: blue; }

Solution

1. Step 1: Identify correct nesting syntax in Sass

   In Sass, nesting is done by placing the child selector inside the parent block using curly braces.

2. Step 2: Check each option

   .container { .button { color: blue; } } correctly nests .button inside .container using braces. Options B and C are plain CSS selectors, not Sass nesting. .container, .button { color: blue; } combines selectors incorrectly.

3. Final Answer:

   .container { .button { color: blue; } } -> Option C

4. Quick Check:

   Nested selectors use braces inside parent [OK]

Hint: Nesting means putting selector inside braces of parent [OK]

Common Mistakes:

• Using plain CSS selectors instead of nesting
• Combining selectors with commas incorrectly
• Missing curly braces for nesting

3. Given the Sass code:

.nav {
  ul {
    margin: 0;
    li {
      list-style: none;
    }
  }
}

What is the compiled CSS output?

medium

A. .nav { ul { margin: 0; } li { list-style: none; } }

B. .nav ul, .nav li { margin: 0; list-style: none; }

C. .nav ul li { margin: 0; list-style: none; }

D. .nav ul { margin: 0; } .nav ul li { list-style: none; }

Solution

1. Step 1: Understand nesting levels

   The ul is nested inside .nav, so the selector becomes .nav ul. The li is nested inside ul, so it becomes .nav ul li.

2. Step 2: Write the compiled CSS

   Each nested block compiles to a combined selector with all parents. Properties stay inside their respective selectors.

3. Final Answer:

   .nav ul { margin: 0; } .nav ul li { list-style: none; } -> Option D

4. Quick Check:

   Nesting combines selectors in order [OK]

Hint: Nested selectors combine parents in order [OK]

Common Mistakes:

• Leaving nested selectors inside braces in output
• Combining properties incorrectly
• Using commas instead of nesting

4. Identify the error in this Sass code:

.card {
  &.active {
    background: green;
  }
  .title {
    font-weight: bold;
  }
  & .subtitle {
    font-size: 1.2rem;
  }
}

medium

A. Missing semicolon after font-weight: bold.

B. The selector & .subtitle adds an unwanted space, changing meaning.

C. Cannot use & with class selectors.

D. Nesting .title inside .card is invalid.

Solution

1. Step 1: Analyze the & .subtitle selector

   The space after & means it selects .card .subtitle. This is different from &.subtitle which selects .card.subtitle.

2. Step 2: Check other parts for errors

   Semicolons are present, & usage with classes is valid, and nesting .title inside .card is correct.

3. Final Answer:

   The selector & .subtitle adds an unwanted space, changing meaning. -> Option B

4. Quick Check:

   Space after & changes selector meaning [OK]

Hint: No space after & means same element, space means child [OK]

Common Mistakes:

• Adding space after & when not intended
• Thinking & cannot be combined with classes
• Missing semicolons (but they are present here)

5. You want to style a button inside a .card only when the card is .active. Which Sass nesting produces the correct CSS selector .card.active button?

hard

A. .card {
&.active {
button {
color: red;
}
}
}

B. .card {
button {
&.active {
color: red;
}
}
}

C. .card {
& button.active {
color: red;
}
}

D. .card.active {
&button {
color: red;
}
}

Solution

1. Step 1: Understand the target selector

   The selector .card.active button means a button inside a .card that also has the .active class.

2. Step 2: Check nesting structure

   .card { &.active { button { color: red; } } } nests button inside &.active inside .card, producing .card.active button. Other options either place .active on the button or use incorrect nesting.

3. Final Answer:

   .card { &.active { button { color: red; } } } -> Option A

4. Quick Check:

   Nesting &.active then button matches .card.active button [OK]

Hint: Nest &.active first, then button inside for correct selector [OK]

Common Mistakes:

• Placing .active on button instead of card
• Using & with space incorrectly
• Not nesting button inside &.active