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.

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