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.