Parent selector with & in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to nest the .child class inside .parent using the parent selector &.

SASS

.parent {
  [1] .child {
    color: blue;
  }
}

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

A&

B*

C#

D$

Attempts:

3 left

💡 Hint

Common Mistakes

Using $ instead of & for the parent selector.

Using # which is for IDs, not parent selector.

Using * which selects all elements.

The & symbol in Sass refers to the parent selector. Using & .child nests the .child class inside .parent.

2fill in blank

medium

Complete the code to style the .button when it is hovered, using the parent selector &.

SASS

.button {
  background: green;
  [1]:hover {
    background: darkgreen;
  }
}

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

A:

B$

C&

D#

Attempts:

3 left

💡 Hint

Common Mistakes

Using $ instead of &.

Using : alone without &.

Using # which is for IDs.

Using &:hover applies styles to the .button when hovered, keeping the selector scoped correctly.

3fill in blank

hard

Fix the error in the code by correctly using the parent selector & to style .icon inside .button.

SASS

.button {
  color: white;
  [1].icon {
    margin-left: 0.5rem;
  }
}

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

A#

B$

C.

D&

Attempts:

3 left

💡 Hint

Common Mistakes

Using $ which is for variables.

Using . which is for class selectors but not parent reference.

Using # which is for IDs.

The & symbol correctly references the parent selector .button, so &.icon targets .button.icon or .button .icon depending on spacing.

4fill in blank

hard

Fill both blanks to nest .title and style it when hovered inside .card using the parent selector &.

SASS

.card {
  [1] .title {
    font-weight: bold;
  }
  [2]:hover {
    color: red;
  }
}

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

A&

B$

C:

D#

Attempts:

3 left

💡 Hint

Common Mistakes

Using different symbols for the two blanks.

Using $ which is for variables.

Using : alone without &.

Using & .title nests the .title class inside .card. Using &:hover styles the .card when hovered.

5fill in blank

hard

Fill all three blanks to create a nested style where .nav contains .link and styles .link when hovered using the parent selector &.

SASS

.nav {
  [1] .link {
    text-decoration: none;
    [2]:hover {
      text-decoration: underline;
    }
  }
  [3] {
    font-size: 1.2rem;
  }
}

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

A&

B$

C&:hover

D:hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover alone without &.

Using $ instead of &.

Mixing up hover selectors.

Use & .link to nest .link inside .nav. Then &:hover styles the hover state of .link. Finally, & targets the .nav itself for font size.

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