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.