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.

Practice

1. What does the & symbol represent when used with pseudo-classes in Sass?

easy

A. It comments out the following code.

B. It creates a new HTML element automatically.

C. It resets all styles to default.

D. It refers to the parent selector, allowing you to combine it with pseudo-classes.

Solution

1. Step 1: Understand the role of & in Sass

   The & symbol stands for the parent selector in Sass, meaning it represents the current selector where it is used.

2. Step 2: Combining & with pseudo-classes

   When combined with pseudo-classes like :hover, it creates a selector that targets the parent element in that state, e.g., .button:hover.

3. Final Answer:

   It refers to the parent selector, allowing you to combine it with pseudo-classes. -> Option D

4. Quick Check:

   & = parent selector [OK]

Hint: Remember & means parent selector in Sass [OK]

Common Mistakes:

• Thinking & creates new elements
• Confusing & with comments
• Assuming & resets styles

2. Which of the following Sass snippets correctly applies a hover style to a button using & with a pseudo-class?

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 correct pseudo-class syntax

   The correct syntax for pseudo-classes in Sass uses &:hover without parentheses or extra colons.

2. Step 2: Identify the valid option

   .button { &:hover { color: red; } } uses &:hover correctly. The other options have syntax errors: missing colon, parentheses, or extra colon.

3. Final Answer:

   .button { &:hover { color: red; } } -> Option B

4. Quick Check:

   Correct pseudo-class syntax = .button { &:hover { color: red; } } [OK]

Hint: Pseudo-classes always start with a colon after & [OK]

Common Mistakes:

• Omitting colon before pseudo-class
• Adding parentheses after pseudo-class
• Using extra colon after pseudo-class

3. Given the Sass code:

.nav { color: black; &:hover { color: blue; } }

What color will the text inside <div class="nav"> be when hovered?

medium

A. Blue

B. Red

C. Black

D. No color change

Solution

1. Step 1: Understand base and hover styles

   The base color for .nav is black. The hover pseudo-class changes color to blue.

2. Step 2: Determine hover effect

   When the mouse pointer is over the .nav element, the color changes to blue as defined by &:hover { color: blue; }.

3. Final Answer:

   Blue -> Option A

4. Quick Check:

   Hover changes color to blue [OK]

Hint: Hover styles override base styles on mouse over [OK]

Common Mistakes:

• Ignoring hover styles
• Confusing base color with hover color
• Assuming no style change on hover

4. Identify the error in this Sass code snippet:

.link { &hover { text-decoration: underline; } }

medium

A. Missing colon before pseudo-class hover.

B. Incorrect use of & symbol.

C. Pseudo-class hover should be uppercase.

D. Text-decoration property is invalid.

Solution

1. Step 1: Check pseudo-class syntax

   Pseudo-classes must start with a colon (:), so hover should be :hover.

2. Step 2: Identify the error

   The code uses &hover without colon, which is invalid syntax in Sass.

3. Final Answer:

   Missing colon before pseudo-class hover. -> Option A

4. Quick Check:

   Pseudo-classes need colon [OK]

Hint: Always put colon before pseudo-classes like :hover [OK]

Common Mistakes:

• Omitting colon before pseudo-class
• Assuming & alone is enough
• Capitalizing pseudo-class names

5. You want to style a button so that when it is focused or hovered, its background changes to green. Which Sass code correctly combines & with multiple pseudo-classes?

hard

A. .button { &:hover &:focus { background: green; } }

B. .button { &hover, &focus { background: green; } }

C. .button { &:hover, &:focus { background: green; } }

D. .button { &:hover:focus { background: green; } }

Solution

1. Step 1: Understand combining multiple pseudo-classes

   To apply styles on hover or focus, selectors must be separated by a comma, each starting with &:.

2. Step 2: Analyze each option

   .button { &:hover, &:focus { background: green; } } correctly uses &:hover, &:focus. .button { &hover, &focus { background: green; } } misses colons. .button { &:hover &:focus { background: green; } } combines selectors incorrectly (descendant). .button { &:hover:focus { background: green; } } tries to chain pseudo-classes, which is invalid here.

3. Final Answer:

   .button { &:hover, &:focus { background: green; } } -> Option C

4. Quick Check:

   Separate pseudo-classes with commas and colons [OK]

Hint: Use commas and colons for multiple pseudo-classes [OK]

Common Mistakes:

• Missing colon before pseudo-classes
• Combining pseudo-classes without commas
• Chaining pseudo-classes incorrectly