Basic selector nesting in SASS - Browser Rendering Trace

Render Flow - Basic selector nesting

Read SASS file

↓

Parse nested selectors

↓

Expand nested selectors to full CSS selectors

↓

Generate CSS rules

↓

Apply CSS rules to matching HTML elements

↓

Render styles in browser

The browser reads the compiled CSS from SASS nesting, matches selectors to HTML elements, and applies styles visually.

Render Steps - 4 Steps

Code Added:<div class="card"> <h2>Title</h2> <p>Some text here.</p> </div>

Before

[ ] (empty page)

→

After

[card]
 ├─ h2: Title
 └─ p: Some text here.

HTML elements appear on the page with default styles (black text on white).

🔧 Browser Action:Builds DOM tree and paints default styles.

Code Sample

A card with a gray background containing a blue heading and larger paragraph text.

SASS

<div class="card">
  <h2>Title</h2>
  <p>Some text here.</p>
</div>

SASS

.card {
  background: #eee;
  padding: 1rem;
  h2 {
    color: blue;
  }
  p {
    font-size: 1.2rem;
  }
}

Render Quiz - 3 Questions

After applying step 3, what visual change do you see inside the card?

A The card background changes to white

B The heading text color changes to blue

C The paragraph text becomes larger

D Nothing changes visually

Common Confusions - 2 Topics

Why doesn't the nested selector h2 style apply outside the .card?

Because nesting in SASS compiles to '.card h2', so only h2 inside .card get styled. Headings outside .card remain default.

💡 Nested selectors add the parent selector before child selectors, limiting style scope.

What if I write h2 { color: red; } outside .card nesting?

That style applies to all h2 elements on the page, overriding nested styles if it has higher specificity or comes later.

💡 Order and specificity determine which styles apply when selectors overlap.

Property Reference

Property	Value Applied	Selector Context	Visual Effect	Common Use
.card	background: #eee; padding: 1rem;	Root selector	Adds gray background and space inside container	Container styling
h2	color: blue;	Nested inside .card	Changes heading text color to blue	Highlight headings
p	font-size: 1.2rem;	Nested inside .card	Increases paragraph text size	Improve readability

Concept Snapshot

Basic selector nesting in SASS lets you write selectors inside others. This compiles to combined selectors like '.parent child'. It scopes styles to elements inside the parent. Commonly used to keep CSS organized and readable. Nested selectors do not style elements outside the parent.