Combining & with pseudo-classes in SASS - Deep Dive

Overview - Combining & with pseudo-classes

What is it?

In Sass, the ampersand (&) symbol represents the current selector. Combining & with pseudo-classes means attaching special states like :hover or :focus directly to the current selector. This lets you write cleaner, nested styles that respond to user interactions or element states without repeating the full selector.

Why it matters

Without combining & with pseudo-classes, you would have to write full selectors repeatedly, making your styles longer and harder to maintain. This feature saves time and reduces errors by keeping related styles grouped and easy to read. It also helps create interactive, accessible web pages by styling elements based on user actions.

Where it fits

Before learning this, you should understand basic CSS selectors and pseudo-classes, as well as Sass nesting and the meaning of &. After this, you can explore advanced Sass features like mixins, functions, and control directives to write even more powerful styles.

Mental Model

Core Idea

The & symbol in Sass acts like a placeholder for the current selector, letting you attach pseudo-classes directly to it without repeating the full selector.

Think of it like...

Imagine & as a sticky note on a page that says 'this spot' — when you add a pseudo-class, it's like writing 'this spot when hovered' without rewriting the whole address.

Selector Block
┌─────────────────────────────┐
│ .button {                   │
│   &:hover {                │
│     color: blue;           │
│   }                        │
│ }                          │
└─────────────────────────────┘

Becomes:

.button:hover {
  color: blue;
}

Build-Up - 7 Steps

1

Foundation

Understanding the & symbol in Sass

Concept: Learn what the & symbol means in Sass and how it represents the current selector.

In Sass, & is a special symbol that stands for the selector where it appears. For example, inside .menu { & { color: red; } } the & means .menu, so the compiled CSS is .menu { color: red; }.

Result

You can write nested styles without repeating the full selector, making your code shorter and clearer.

Understanding & as a placeholder for the current selector is the key to writing nested Sass that compiles correctly.

2

Foundation

Basics of CSS pseudo-classes

Concept: Learn what pseudo-classes are and how they change styles based on element states.

Pseudo-classes like :hover, :focus, and :active let you style elements when users interact with them. For example, button:hover changes the button's style when the mouse is over it.

Result

You can create interactive styles that respond to user actions without JavaScript.

Knowing pseudo-classes helps you understand why combining them with & in Sass is useful for dynamic styling.

3

Intermediate

Combining & with simple pseudo-classes

🤔Before reading on: do you think writing & :hover adds a space between the selector and :hover or not? Commit to your answer.

Concept: Learn how to attach pseudo-classes directly to the current selector using & without unwanted spaces.

In Sass, writing & followed by a pseudo-class without a space attaches it directly. For example: .button { &:hover { color: red; } } compiles to: .button:hover { color: red; } Note: If you add a space like & :hover, it means a child element with :hover, which is different.

Result

You get the correct CSS selector with the pseudo-class applied to the original element.

Knowing that no space after & means 'same element with pseudo-class' prevents common selector mistakes.

4

Intermediate

Using & with multiple pseudo-classes

🤔Before reading on: can you combine multiple pseudo-classes like &:hover:focus in Sass? Commit to yes or no.

Concept: Learn how to chain multiple pseudo-classes on the current selector using &.

You can write multiple pseudo-classes chained together after &. For example: .link { &:hover:focus { text-decoration: underline; } } This compiles to: .link:hover:focus { text-decoration: underline; } This styles the element when both hover and focus states are active.

Result

You can target very specific element states cleanly and concisely.

Chaining pseudo-classes with & lets you handle complex user interactions without repeating selectors.

5

Intermediate

Avoiding spaces when combining & and pseudo-classes

🤔Before reading on: does adding a space between & and :hover select the same element or a child? Commit to your answer.

Concept: Understand how spaces affect selector meaning when combining & with pseudo-classes.

In Sass, writing & :hover (with a space) means 'any child element that is hovered', not the current element. For example: .nav { & :hover { color: green; } } compiles to: .nav :hover { color: green; } which targets hovered children inside .nav, not .nav itself.

Result

You avoid accidentally styling the wrong elements by controlling spaces.

Recognizing how spaces change selector scope helps prevent subtle bugs in your styles.

6

Advanced

Combining & with pseudo-elements and pseudo-classes

🤔Before reading on: can you combine & with both pseudo-classes and pseudo-elements like &:hover::before? Commit to yes or no.

Concept: Learn how to use & with both pseudo-classes and pseudo-elements together for advanced styling.

You can combine & with pseudo-classes and pseudo-elements in one selector. For example: .button { &:hover::before { content: '→'; color: red; } } This compiles to: .button:hover::before { content: '→'; color: red; } This adds a red arrow before the button text only when hovered.

Result

You can create rich interactive effects by combining states and decorative elements.

Mastering combined pseudo-classes and pseudo-elements with & unlocks powerful, concise styling.

7

Expert

How Sass compiles & with pseudo-classes internally

🤔Before reading on: do you think Sass replaces & with the full selector text before adding pseudo-classes, or does it keep & as a symbol? Commit to your answer.

Concept: Understand the internal process Sass uses to replace & with the full selector and attach pseudo-classes correctly.

When Sass compiles, it replaces & with the full parent selector text exactly where & appears. Then it appends pseudo-classes or pseudo-elements without adding spaces unless explicitly written. This process ensures the final CSS selector matches the intended element state. For example, given: .nav { &::after { content: ''; } } Sass replaces & with .nav, producing .nav::after in CSS. This replacement happens recursively for nested selectors, allowing complex combinations.

Result

You get precise CSS selectors that behave as expected in browsers.

Knowing Sass's replacement mechanism explains why spacing and placement of & matter so much in selector output.

Under the Hood

Sass treats & as a placeholder token representing the full parent selector string. During compilation, it scans nested blocks and replaces & with the exact selector text from the outer scope. When combined with pseudo-classes, Sass appends them directly to the replaced selector without adding spaces unless explicitly coded. This string replacement happens before outputting the final CSS, ensuring selectors are accurate and efficient.

Why designed this way?

The & symbol was designed to avoid repeating long selectors in nested styles, making Sass code cleaner and easier to maintain. By using a placeholder that expands during compilation, Sass allows flexible selector combinations, including pseudo-classes and pseudo-elements. Alternatives like repeating selectors manually were error-prone and verbose, so this design balances simplicity and power.

Sass Nested Selector Compilation

Parent Selector: .menu
Nested Block: & :hover

Process:

┌───────────────┐
│ & :hover      │
│ (placeholder) │
└──────┬────────┘
       │ Replace & with .menu
       ▼
┌───────────────────┐
│ .menu :hover      │
└───────────────────┘

If no space:

┌───────────────┐
│ &:hover       │
│ (placeholder) │
└──────┬────────┘
       │ Replace & with .menu
       ▼
┌───────────────────┐
│ .menu:hover       │
└───────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does writing & :hover in Sass select the current element on hover or its hovered child elements? Commit to your answer.

Common Belief: Many think & :hover styles the current element when hovered.

Reality: Actually, & :hover selects any child element that is hovered, not the current element itself.

Why it matters: This misunderstanding causes styles to apply to wrong elements, breaking intended hover effects and confusing debugging.

Quick: Can you combine multiple pseudo-classes directly after & without issues? Commit to yes or no.

Common Belief: Some believe chaining pseudo-classes like &:hover:focus is invalid or unsupported in Sass.

Reality: Sass fully supports chaining multiple pseudo-classes after &, compiling them correctly.

Why it matters: Knowing this enables writing precise selectors for complex user interactions without extra code.

Quick: Does & always represent only the immediate parent selector or can it represent complex nested selectors? Commit to your answer.

Common Belief: Some think & only stands for the immediate parent selector and cannot represent combined or nested selectors.

Reality: & represents the full current selector context, including any nesting or combinations, not just a simple parent.

Why it matters: This knowledge helps write advanced nested selectors confidently, avoiding selector duplication or errors.

Quick: Is the space between & and pseudo-class optional and harmless? Commit to yes or no.

Common Belief: Many assume spaces between & and pseudo-classes don't affect the selector meaning.

Reality: Spaces change the selector meaning drastically, switching from the current element to its children.

Why it matters: Ignoring this leads to subtle bugs where styles apply to wrong elements, causing UI inconsistencies.

Expert Zone

1

When nesting deeply, & can represent complex selectors including combinators, so placement affects specificity and selector output.

2

Combining & with interpolation allows dynamic pseudo-class names, enabling advanced conditional styling patterns.

3

Using & with pseudo-classes inside media queries or parent selectors can produce unexpected selector combinations if spacing is not carefully managed.

When NOT to use

Avoid using & with pseudo-classes when selectors become too complex or unclear; instead, write explicit selectors for readability. For dynamic states, consider using JavaScript class toggling combined with simple selectors rather than overly nested Sass selectors.

Production Patterns

In real projects, & with pseudo-classes is used to keep component styles modular and maintainable, especially in UI libraries. It helps create hover, focus, and active states inside component blocks without repeating selectors, improving CSS bundle size and developer productivity.

Connections

CSS Specificity

Combining & with pseudo-classes directly affects selector specificity by creating compound selectors.

Understanding how & expands helps predict and control CSS specificity, preventing style conflicts.

JavaScript Event Handling

Pseudo-classes like :hover and :focus represent user interaction states that JavaScript can also detect and manipulate.

Knowing CSS pseudo-classes complements JavaScript event handling, enabling better UI responsiveness and accessibility.

Natural Language Grammar

The way & combines with pseudo-classes is similar to how modifiers attach to nouns in grammar, changing meaning without repeating the noun.

Recognizing this pattern helps understand selector composition as a language structure, improving mental models for CSS.

Common Pitfalls

#1 Adding a space between & and a pseudo-class causes wrong element selection.

Wrong approach:

.button {
& :hover {
color: red;
}
}

Correct approach:

.button {
&:hover {
color: red;
}
}

Root cause:

Misunderstanding that spaces in selectors mean child elements, not the same element.

#2 Trying to use & outside of nested blocks causes errors or unexpected output.

Wrong approach:

&:hover {
color: blue;
}

Correct approach:

.button {
&:hover {
color: blue;
}
}

Root cause:

Using & without a parent selector context is invalid because & needs a selector to replace.

#3 Chaining pseudo-classes with spaces instead of directly causes selector errors.

Wrong approach:

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

Correct approach:

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

Root cause:

Spaces separate selectors, so pseudo-classes must be chained without spaces to apply to the same element.

Key Takeaways

The & symbol in Sass is a powerful placeholder for the current selector, enabling concise nested styles.

Combining & with pseudo-classes lets you style element states like hover and focus without repeating selectors.

Spaces between & and pseudo-classes change selector meaning, so avoid unintended spaces to target the correct element.

You can chain multiple pseudo-classes and pseudo-elements with & for advanced, precise styling.

Understanding how Sass replaces & internally helps prevent common selector mistakes and write maintainable CSS.