Child selector in CSS - Browser Rendering Trace

Render Flow - Child selector

[Parse CSS selector '>'] -> [Match parent elements] -> [Find direct children only] -> [Apply styles to matched children] -> [Recalculate layout] -> [Paint changes]

The browser reads the child selector '>' and applies styles only to elements that are direct children of the specified parent, then updates the layout and paints the changes.

Render Steps - 2 Steps

Code Added:HTML structure with nested elements

Before

[div]
 ├─ [p] Paragraph 1
 └─ [section]
     └─ [p] Paragraph 2

→

After

[div]
 ├─ [p] Paragraph 1
 └─ [section]
     └─ [p] Paragraph 2

Initial HTML structure shows a div with a direct p child and a nested p inside section.

🔧 Browser Action:Builds DOM tree with nested elements

Code Sample

Only the paragraph directly inside the div turns red and bold; the nested paragraph inside section stays default.

CSS

<div>
  <p>Paragraph 1</p>
  <section>
    <p>Paragraph 2</p>
  </section>
</div>

CSS

div > p {
  color: red;
  font-weight: bold;
}

Render Quiz - 3 Questions

After applying the CSS in step 2, which paragraph is styled red and bold?

A Both paragraphs inside div and section

B Only the paragraph directly inside the div

C Only the paragraph inside the section

D No paragraphs are styled

Common Confusions - 2 Topics

Why doesn't the nested paragraph inside <section> turn red?

Because the child selector '>' only styles direct children of the div. The nested paragraph is a grandchild, so it is not matched.

💡 Child selector '>' styles only one level down, not deeper.

What if I want to style all paragraphs inside the div, including nested ones?

Use the descendant selector (space) instead of '>'. It matches all paragraphs inside the div at any depth.

💡 Space selector styles all descendants; '>' styles only direct children.

Property Reference

Selector	What It Matches	Visual Effect	Common Use
>	Direct child elements only	Styles only immediate children, not deeper descendants	Target direct children for precise styling
	All descendants	Styles all nested elements regardless of depth	General descendant styling
:nth-child()	Specific child by position	Styles elements based on their order among siblings	Styling specific children
+	Adjacent sibling	Styles the next sibling element only	Styling immediate siblings

Concept Snapshot

Child selector '>' targets only direct children of an element. It does not style nested grandchildren or deeper descendants. Use it for precise styling of immediate child elements. Default descendant selector (space) matches all nested descendants. Example: div > p styles only paragraphs directly inside div.