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.