Parent selector with & in SASS

Introduction

The parent selector & helps you write CSS rules that relate to the current selector without repeating it. It keeps your styles organized and easy to read.

When you want to style a child element based on its parent class.

When you need to add a hover effect or state style to the same element.

When you want to create nested styles without repeating the full selector.

When you want to combine the parent selector with pseudo-classes like :hover or :focus.

When you want to write cleaner and shorter CSS code.

Syntax

SASS

& { /* nested styles here */ }

The & symbol represents the current parent selector in Sass nesting.

You can combine & with other selectors or pseudo-classes like &:hover or &-modifier.

Examples

Creates a class .button-primary by combining & with -primary.

SASS

.button {
  &-primary {
    color: blue;
  }
}

Adds a hover style to the .nav element using &.

SASS

.nav {
  &:hover {
    background: lightgray;
  }
}

Styles a child element with class .title inside .card.

SASS

.card {
  & .title {
    font-weight: bold;
  }
}

Sample Program

This Sass code styles a container with a background and padding. It creates a .container-header class for the header style, adds a hover effect on .container, and styles a child .content element inside .container.

SASS

@charset "UTF-8";

.container {
  background-color: #f0f0f0;
  padding: 1rem;

  &-header {
    font-size: 1.5rem;
    color: #333;
  }

  &:hover {
    background-color: #e0e0e0;
  }

  & .content {
    margin-top: 1rem;
    color: #666;
  }
}

Important Notes

The & selector always refers to the full parent selector, so you can build complex selectors easily.

Using & helps avoid repeating long class names and keeps your Sass code DRY (Don't Repeat Yourself).

Remember to compile your Sass to CSS before using it in a browser.

Summary

The & symbol in Sass means the current parent selector.

It helps write nested, cleaner CSS without repeating selectors.

You can combine & with other selectors or pseudo-classes for flexible styling.

Practice

1. What does the & symbol represent in Sass when used inside nested selectors?

easy

A. It resets all styles to default.

B. It creates a new global selector.

C. It refers to the current parent selector.

D. It comments out the nested block.

Solution

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

   The & symbol is used to refer back to the parent selector in nested Sass code.

2. Step 2: Identify what & does in the context

   It helps avoid repeating the parent selector by representing it directly.

3. Final Answer:

   It refers to the current parent selector. -> Option C

4. Quick Check:

   & means parent selector [OK]

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

Common Mistakes:

• Thinking & creates a new selector
• Confusing & with a comment symbol
• Assuming & resets styles

2. Which of the following is the correct Sass syntax to style a button with a hover effect using the parent selector &?

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

   The correct way to use & with a pseudo-class is &:hover without spaces or parentheses.

2. Step 2: Identify the valid Sass nesting syntax

   button { &:hover { color: red; } } uses &:hover correctly inside the button block.

3. Final Answer:

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

4. Quick Check:

   Use &:pseudo-class with no spaces [OK]

Hint: Use &:hover with no space or parentheses [OK]

Common Mistakes:

• Adding parentheses after pseudo-class
• Leaving space between & and pseudo-class
• Writing &hover instead of &:hover

3. Given the Sass code:

nav {
  &.active {
    color: blue;
  }
  ul & {
    margin: 0;
  }
}

Which CSS selectors will be generated?

medium

A. nav.active { color: blue; }
ul nav { margin: 0; }

B. nav .active { color: blue; }
ul nav { margin: 0; }

C. nav.active { color: blue; }
ul & { margin: 0; }

D. nav.active { color: blue; }
ul nav.active { margin: 0; }

Solution

1. Step 1: Understand &.active usage

   The & refers to nav, so &.active becomes nav.active.

2. Step 2: Understand ul & usage

   This means ul nav, because & is replaced by nav but placed after ul.

3. Final Answer:

   nav.active { color: blue; } and ul nav { margin: 0; } -> Option A

4. Quick Check:

   & replaces parent selector exactly [OK]

Hint: Replace & with parent selector exactly where placed [OK]

Common Mistakes:

• Assuming & always prefixes the selector
• Confusing space placement around &
• Treating & as a separate selector

4. Identify the error in this Sass code snippet:

.card {
  & .title {
    font-weight: bold;
  }
  &.highlight {
    background: yellow;
  }
  &hover {
    color: red;
  }
}

medium

A. Missing colon in &:hover pseudo-class

B. Incorrect space after & in & .title

C. Cannot use & with class selectors

D. Background property is invalid

Solution

1. Step 1: Check each & usage

   & .title is valid for child selector, &.highlight is valid for combined class.

2. Step 2: Identify incorrect pseudo-class syntax

   &hover is missing the colon and should be &:hover.

3. Final Answer:

   Missing colon in &:hover pseudo-class -> Option A

4. Quick Check:

   Pseudo-classes need colon after & [OK]

Hint: Pseudo-classes need &: not & alone [OK]

Common Mistakes:

• Forgetting colon before pseudo-class
• Thinking space after & is always wrong
• Assuming & can't combine with classes

5. You want to style a list where the li elements inside a ul have a special style only when the ul has a class highlight. Which Sass code using & correctly achieves this?

hard

A. ul.highlight {
li & {
color: green;
}
}

B. ul {
&.highlight li {
color: green;
}
}

C. ul {
li {
&.highlight {
color: green;
}
}
}

D. ul {
& li.highlight {
color: green;
}
}

Solution

1. Step 1: Understand the selector goal

   We want to style li inside ul.highlight, so the selector is ul.highlight li.

2. Step 2: Check which Sass code produces that selector

   ul { &.highlight li { color: green; } } nests &.highlight li inside ul, so & becomes ul, resulting in ul.highlight li.

3. Final Answer:

   ul { &.highlight li { color: green; } } -> Option B

4. Quick Check:

   & replaces parent selector exactly where placed [OK]

Hint: Place & where parent selector should appear in nested code [OK]

Common Mistakes:

• Misplacing & causing wrong selector order
• Trying to put & inside child selector
• Confusing class placement on li instead of ul