Combining & with pseudo-classes 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 equivalent CSS selector for the nested rule?

SASS

&:hover { color: red; }

A .button & :hover

B .button :hover

C &:hover

D .button:hover

💡 Hint

Remember that & represents the parent selector in Sass.

In Sass, & is replaced by the parent selector. So &:hover becomes .button:hover if the parent is .button.

❓ selector

intermediate

What is the output selector for this Sass snippet?

Consider this Sass code inside a .nav class: &:not(:last-child) { margin-right: 1rem; } What CSS selector does it generate?

SASS

&:not(:last-child) { margin-right: 1rem; }

A .nav :not(:last-child)

B .nav:not(:last-child)

C &:not(:last-child)

D .nav:not(:last-child) {}

💡 Hint

The & replaces the parent selector exactly.

The & symbol is replaced by the parent selector without adding spaces. So &:not(:last-child) becomes .nav:not(:last-child).

❓ rendering

advanced

Which option correctly styles only active links inside .menu?

You want to style only active links inside a .menu container using Sass and &:active. Which option produces the correct CSS?

SASS

.menu {
  a {
    &:active {
      color: blue;
    }
  }
}

A .menu a:active { color: blue; }

B .menu :active a { color: blue; }

C .menu a &:active { color: blue; }

D &.menu a:active { color: blue; }

💡 Hint

The & represents the current selector, which is 'a' inside .menu.

Inside the nested a block, & refers to 'a'. So &:active becomes a:active inside .menu, resulting in .menu a:active.

❓ accessibility

advanced

Which Sass selector combination improves keyboard accessibility for buttons?

You want to style buttons when they are focused or hovered to improve keyboard accessibility. Which Sass code snippet correctly combines & with pseudo-classes?

SASS

button {
  &:hover, &:focus-visible {
    outline: 2px solid blue;
  }
}

A button:hover, button:focus-visible { outline: 2px solid blue; }

B button &:hover, button &:focus-visible { outline: 2px solid blue; }

C &:hover, &:focus-visible button { outline: 2px solid blue; }

D button:hover &focus-visible { outline: 2px solid blue; }

💡 Hint

The & replaces the parent selector exactly without adding spaces.

The & inside button block refers to button. So &:hover, &:focus-visible becomes button:hover, button:focus-visible.

🧠 Conceptual

expert

What is the output CSS selector for this Sass code?

Given this Sass code: .nav { & > ul { & > li:first-child { color: green; } } } What is the full CSS selector generated for the color property?

SASS

.nav {
  & > ul {
    & > li:first-child {
      color: green;
    }
  }
}

A .nav & > ul > li:first-child { color: green; }

B .nav > ul li:first-child { color: green; }

C .nav > ul > li:first-child { color: green; }

D .nav ul > li:first-child { color: green; }

💡 Hint

Each & replaces the full parent selector at its nesting level.

The first & inside .nav becomes .nav, so & > ul is .nav > ul. The next & inside that becomes .nav > ul, so & > li:first-child is .nav > ul > li:first-child.