Combining & with pseudo-classes in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to style a button when hovered.

SASS

.button[1] {
  color: blue;
}

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

A&:hover

B:hover

C.hover

D#hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover without & causes invalid nesting.

Using .hover or #hover is incorrect for pseudo-classes.

In Sass, using & before a pseudo-class like :hover combines the parent selector with the pseudo-class correctly.

2fill in blank

medium

Complete the code to style a link when it is focused.

SASS

a[1] {
  outline: 2px solid orange;
}

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

A&:focus

B:focus

C.focus

D#focus

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting & leads to invalid nesting.

Using .focus or #focus is not valid for pseudo-classes.

Using & with :focus correctly nests the pseudo-class inside the parent selector in Sass.

3fill in blank

hard

Fix the error in the code to style a paragraph when hovered.

SASS

p {
  color: black;
  [1] {
    color: red;
  }
}

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

A#hover

B:hover

C.hover

D&:hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover alone inside nested block causes syntax error.

Using .hover or #hover is invalid.

Inside a nested block, & must be used to refer to the parent selector combined with the pseudo-class.

4fill in blank

hard

Fill both blanks to style a list item when hovered and focused.

SASS

li {
  color: gray;
  [1] {
    color: blue;
  }
  [2] {
    color: green;
  }
}

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

A&:hover

B:hover

C&:focus

D:focus

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting & causes invalid nesting.

Using :hover or :focus alone inside nested blocks is wrong.

Use & with pseudo-classes inside nested blocks to combine with the parent selector correctly.

5fill in blank

hard

Fill all three blanks to style a navigation link when hovered, focused, and active.

SASS

nav a {
  color: black;
  [1] {
    color: red;
  }
  [2] {
    color: orange;
  }
  [3] {
    color: purple;
  }
}

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

A&:hover

B&:focus

C&:active

D:hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover without & inside nested blocks causes errors.

Mixing & and no & leads to inconsistent styles.

Use & with each pseudo-class inside nested blocks to combine with the parent selector properly.