Nesting depth and best practices in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to nest the .button styles inside .container.

SASS

.container {
  [1] {
    color: blue;
  }
}

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

A.button

B#button

Cbutton

D&.button

Attempts:

3 left

💡 Hint

Common Mistakes

Using an ID selector (#button) instead of a class selector.

Forgetting the dot before the class name.

Using the element selector without a dot.

In Sass, to nest styles for a class inside another, you write the nested class selector inside the parent block. Here, .button is nested inside .container.

2fill in blank

medium

Complete the code to nest the :hover pseudo-class inside .link.

SASS

.link {
  [1] {
    text-decoration: underline;
  }
}

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

A:hover

B&:hover

C.hover

D#hover

Attempts:

3 left

💡 Hint

Common Mistakes

Writing :hover without &.

Using class or ID selectors instead of pseudo-classes.

In Sass, to nest a pseudo-class like :hover, use the ampersand & to refer to the parent selector, then add the pseudo-class.

3fill in blank

hard

Fix the error in the nested Sass code to correctly style li elements inside ul.menu.

SASS

ul.menu {
  [1] li {
    padding: 10px;
  }
}

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

A>

B&:hover

C&

D& >

Attempts:

3 left

💡 Hint

Common Mistakes

Using combinators like > incorrectly inside the selector.

Adding pseudo-classes when not needed.

To nest li inside ul.menu, use & li where the ampersand & refers to the parent selector.

4fill in blank

hard

Fill both blanks to create a nested Sass rule that styles p elements inside .card only when hovered.

SASS

.card {
  [1] {
    [2] {
      color: red;
    }
  }
}

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

Ap

B&:hover

C&

D:hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover without & which refers to the wrong selector.

Nesting :hover before the element selector.

First, nest the p elements inside .card. Then nest the hover state using &:hover to style p only when the p is hovered.

5fill in blank

hard

Fill all three blanks to write a Sass nested rule that styles span inside .alert when span has class .active and is hovered.

SASS

.alert {
  [1] {
    [2] {
      [3] {
        font-weight: bold;
      }
    }
  }
}

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

Aspan

B&.active

C&:hover

D.active

Attempts:

3 left

💡 Hint

Common Mistakes

Using .active without &, which targets a child instead of the parent.

Placing :hover before .active.

Not nesting selectors in the correct order.

First, nest the span inside .alert. Then nest the class .active using &.active. Finally, nest the hover state with &:hover to style span only when it is active and hovered.