Combining & with pseudo-classes in SASS - Browser Rendering Trace

Render Flow - Combining & with pseudo-classes

Read .button selector

↓

Create .button node

↓

Parse & in nested selector

↓

Combine & with :hover

↓

Create .button:hover rule

↓

Apply styles on hover

↓

Render visual changes on hover

The browser reads the base selector .button, then combines it with the pseudo-class :hover using the & symbol in Sass. This creates a new CSS rule .button:hover that applies styles when the user hovers over the button.

Render Steps - 3 Steps

Code Added:<button class="button">Click me</button>

Before

[ ]
(empty page)

→

After

[button: 'Click me']

The button element appears on the page with default browser styles.

🔧 Browser Action:Creates DOM node and applies default styles

Code Sample

A button with a light blue background that changes to a deeper blue when hovered over.

SASS

<button class="button">Click me</button>

SASS

.button {
  background-color: lightblue;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  &:hover {
    background-color: deepskyblue;
  }
}

Render Quiz - 3 Questions

After applying step 3, what happens when you hover the button?

A The button background changes to deep sky blue

B The button text changes color

C Nothing changes visually

D The button disappears

Common Confusions - 2 Topics

Why doesn't &:hover work if I forget the & symbol?

Without &, the nested :hover becomes a separate selector, not combined with the parent. So styles won't apply on hovering the parent element.

💡 Always use & to combine parent selector with pseudo-classes in nested Sass.

Why does the hover style not apply on child elements inside the button?

The :hover pseudo-class applies to the element itself, not its children. So only the button background changes, not inner text or icons unless styled separately.

💡 Style child elements explicitly if you want them to change on hover.

Property Reference

Property	Value Applied	Selector Effect	Visual Effect	Common Use
&	Used in nested selectors	Represents parent selector	Combines with pseudo-classes or elements	Simplifies writing complex selectors
:hover	Pseudo-class	Matches element on mouse hover	Changes style on mouse over	Interactive feedback on buttons/links
background-color	color value	Applies to element	Changes background color	Visual styling of elements
padding	length values	Applies inside element border	Adds space inside element	Improves clickable area and spacing
border-radius	length or %	Applies to element corners	Rounds corners visually	Softens element edges

Concept Snapshot

In Sass, & represents the parent selector. Use & combined with pseudo-classes like :hover to style states. Example: .button { &:hover { ... } } compiles to .button:hover { ... }. This creates interactive styles that apply on user actions. Always include & in nested pseudo-class selectors to combine 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