Combining & with pseudo-classes in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the & symbol represent in Sass?

The & symbol represents the parent selector. It lets you refer to the current selector inside nested rules.

beginner

How do you combine <code>&</code> with a pseudo-class like <code>:hover</code> in Sass?

You write &:hover inside a nested block. It means "apply styles when the parent element is hovered."

beginner

Example: What CSS does this Sass produce?

.btn {
  color: blue;
  &:hover {
    color: red;
  }
}

It produces:

.btn {
  color: blue;
}
.btn:hover {
  color: red;
}

This means the button is blue normally and red when hovered.

intermediate

Can you combine & with multiple pseudo-classes? For example, &:focus:hover?

Yes! You can combine multiple pseudo-classes after &. For example, &:focus:hover targets the parent element when it is both focused and hovered.

beginner

Why is using & with pseudo-classes helpful in Sass?

It keeps your styles organized and readable by nesting related states inside the main selector. It avoids repeating the full selector and reduces errors.

In Sass, what does &:hover mean inside a nested block?

A Apply styles only on click

B Apply styles to all child elements

C Apply styles when the parent element is hovered

D Apply styles to sibling elements

&:hover targets the parent selector when it is hovered by the mouse.

What CSS does this Sass produce?

.card {
  background: white;
  &:focus {
    background: gray;
  }
}

A .card { background: white; } .card:focus { background: gray; }

B .card { background: white; } .focus { background: gray; }

C .card:focus { background: white; } .card { background: gray; }

D .card { background: white; background: gray; }

The &:focus creates a CSS rule for .card:focus.

Which of these is a valid way to combine & with pseudo-classes in Sass?

A &hover-active

B &hover:active

C &:hover-active

D &:hover:active

Pseudo-classes are combined with colons, so &:hover:active is valid.

Why use & in Sass instead of writing the full selector again?

A To make code longer

B To keep code DRY and organized

C To confuse browsers

D To disable styles

Using & avoids repeating selectors and keeps styles neat.

What happens if you write &:not(:hover) in Sass?

A Styles apply when the parent is NOT hovered

B Styles apply only on hover

C Styles apply to child elements

D It causes an error

&:not(:hover) targets the parent when it is not hovered.

Explain how the & symbol works when combined with pseudo-classes in Sass.

Think about how Sass helps write shorter, clearer CSS.

Describe a real-life example where combining & with pseudo-classes in Sass improves your CSS code.

Imagine styling a button with different states.

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