Parent selector with & in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What CSS selector does this Sass code produce?

Given the Sass code below, what is the resulting CSS selector for the nested rule?

SASS

.button {
  &-primary {
    color: blue;
  }
}

A .primary-button { color: blue; }

B .button-primary { color: blue; }

C .button .primary { color: blue; }

D .button > .primary { color: blue; }

💡 Hint

The & symbol represents the parent selector exactly as it is.

The & in Sass replaces itself with the parent selector. Here, &-primary becomes .button-primary.

❓ selector

intermediate

Which CSS selector is generated by this Sass snippet?

Look at this Sass code and choose the correct CSS selector it compiles to:

SASS

.nav {
  ul {
    &.active {
      font-weight: bold;
    }
  }
}

A .nav .ul.active { font-weight: bold; }

B .nav ul .active { font-weight: bold; }

C .nav ul > .active { font-weight: bold; }

D .nav ul.active { font-weight: bold; }

💡 Hint

The & replaces the parent selector exactly where it appears.

The & in &.active replaces the parent selector ul, so it becomes ul.active inside .nav.

📝 Syntax

advanced

What error does this Sass code cause?

Examine this Sass code and select the error it produces when compiled:

SASS

.card {
  &__header {
    color: red
  }
}

A SyntaxError: Missing semicolon after 'color: red'

B No error, compiles correctly

C RuntimeError: Undefined variable

D SyntaxError: Unexpected token '&'

💡 Hint

Check punctuation carefully in CSS properties.

The property 'color: red' is missing a semicolon at the end, causing a syntax error.

❓ rendering

advanced

What visual style will the button have?

Given this Sass code, what color will the button text be in the browser?

SASS

.btn {
  color: black;
  &--danger {
    color: red;
  }
}

A All buttons will have black text, including 'btn--danger'.

B The button with class 'btn--danger' will have black text.

C The button with class 'btn--danger' will have red text.

D The button with class 'btn--danger' will have blue text.

💡 Hint

Look at how the nested selector changes the class name and color.

The nested selector &--danger becomes .btn--danger, which sets color to red, overriding the base .btn color.

❓ accessibility

expert

How does using & in Sass help maintain accessibility in CSS?

Choose the best explanation of how the parent selector & can improve accessibility in CSS code:

A It helps create clear, consistent class names that assist screen readers in identifying elements.

B It automatically adds ARIA attributes to elements for better accessibility.

C It prevents keyboard navigation by nesting selectors deeply.

D It disables color contrast checks in CSS.

💡 Hint

Think about how naming conventions affect accessibility tools.

Using & helps create consistent class names, which can be referenced in ARIA labels or scripts, aiding screen readers and accessibility.

Practice

1. What does the & symbol represent in Sass when used inside nested selectors?

easy

A. It resets all styles to default.

B. It creates a new global selector.

C. It refers to the current parent selector.

D. It comments out the nested block.

Solution

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

   The & symbol is used to refer back to the parent selector in nested Sass code.

2. Step 2: Identify what & does in the context

   It helps avoid repeating the parent selector by representing it directly.

3. Final Answer:

   It refers to the current parent selector. -> Option C

4. Quick Check:

   & means parent selector [OK]

Hint: Remember & means "this parent" selector in Sass [OK]

Common Mistakes:

• Thinking & creates a new selector
• Confusing & with a comment symbol
• Assuming & resets styles

2. Which of the following is the correct Sass syntax to style a button with a hover effect using the parent selector &?

easy

A. button {
&hover {
color: red;
}
}

B. button {
& :hover {
color: red;
}
}

C. button {
&:hover() {
color: red;
}
}

D. button {
&:hover {
color: red;
}
}

Solution

1. Step 1: Check the correct pseudo-class syntax with &

   The correct way to use & with a pseudo-class is &:hover without spaces or parentheses.

2. Step 2: Identify the valid Sass nesting syntax

   button { &:hover { color: red; } } uses &:hover correctly inside the button block.

3. Final Answer:

   button { &:hover { color: red; } } -> Option D

4. Quick Check:

   Use &:pseudo-class with no spaces [OK]

Hint: Use &:hover with no space or parentheses [OK]

Common Mistakes:

• Adding parentheses after pseudo-class
• Leaving space between & and pseudo-class
• Writing &hover instead of &:hover

3. Given the Sass code:

nav {
  &.active {
    color: blue;
  }
  ul & {
    margin: 0;
  }
}

Which CSS selectors will be generated?

medium

A. nav.active { color: blue; }
ul nav { margin: 0; }

B. nav .active { color: blue; }
ul nav { margin: 0; }

C. nav.active { color: blue; }
ul & { margin: 0; }

D. nav.active { color: blue; }
ul nav.active { margin: 0; }

Solution

1. Step 1: Understand &.active usage

   The & refers to nav, so &.active becomes nav.active.

2. Step 2: Understand ul & usage

   This means ul nav, because & is replaced by nav but placed after ul.

3. Final Answer:

   nav.active { color: blue; } and ul nav { margin: 0; } -> Option A

4. Quick Check:

   & replaces parent selector exactly [OK]

Hint: Replace & with parent selector exactly where placed [OK]

Common Mistakes:

• Assuming & always prefixes the selector
• Confusing space placement around &
• Treating & as a separate selector

4. Identify the error in this Sass code snippet:

.card {
  & .title {
    font-weight: bold;
  }
  &.highlight {
    background: yellow;
  }
  &hover {
    color: red;
  }
}

medium

A. Missing colon in &:hover pseudo-class

B. Incorrect space after & in & .title

C. Cannot use & with class selectors

D. Background property is invalid

Solution

1. Step 1: Check each & usage

   & .title is valid for child selector, &.highlight is valid for combined class.

2. Step 2: Identify incorrect pseudo-class syntax

   &hover is missing the colon and should be &:hover.

3. Final Answer:

   Missing colon in &:hover pseudo-class -> Option A

4. Quick Check:

   Pseudo-classes need colon after & [OK]

Hint: Pseudo-classes need &: not & alone [OK]

Common Mistakes:

• Forgetting colon before pseudo-class
• Thinking space after & is always wrong
• Assuming & can't combine with classes

5. You want to style a list where the li elements inside a ul have a special style only when the ul has a class highlight. Which Sass code using & correctly achieves this?

hard

A. ul.highlight {
li & {
color: green;
}
}

B. ul {
&.highlight li {
color: green;
}
}

C. ul {
li {
&.highlight {
color: green;
}
}
}

D. ul {
& li.highlight {
color: green;
}
}

Solution

1. Step 1: Understand the selector goal

   We want to style li inside ul.highlight, so the selector is ul.highlight li.

2. Step 2: Check which Sass code produces that selector

   ul { &.highlight li { color: green; } } nests &.highlight li inside ul, so & becomes ul, resulting in ul.highlight li.

3. Final Answer:

   ul { &.highlight li { color: green; } } -> Option B

4. Quick Check:

   & replaces parent selector exactly where placed [OK]

Hint: Place & where parent selector should appear in nested code [OK]

Common Mistakes:

• Misplacing & causing wrong selector order
• Trying to put & inside child selector
• Confusing class placement on li instead of ul