Bird
Raised Fist0
CSSmarkup~10 mins

Universal selector in CSS - Browser Rendering Trace

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Render Flow - Universal selector
[Parse selector '*'] -> [Match all elements in DOM] -> [Apply styles to every element] -> [Calculate specificity (lowest)] -> [Render styles on page]
The browser reads the universal selector '*', matches every element in the page, applies the styles with lowest specificity, then renders the styles visually.
Render Steps - 3 Steps
Code Added:No CSS applied
Before
[div]
 ├─ [p] Hello
 └─ [button] Click me
→
After
[div]
 ├─ [p] Hello
 └─ [button] Click me
No styles applied yet, so default browser styles show with no borders or color changes.
🔧 Browser Action:Build DOM tree, no CSS applied
Code Sample
All elements on the page get red text color and a black border.
CSS
<div>
  <p>Hello</p>
  <button>Click me</button>
</div>
CSS
* {
  color: red;
  border: 1px solid black;
}
Render Quiz - 3 Questions
Test your understanding
After applying step 2, what visual change do you see on the text?
AOnly paragraphs turn red
BAll text turns red
COnly buttons turn red
DNo color change
Common Confusions - 2 Topics
Why does the universal selector apply styles to elements I didn't expect?
The universal selector '*' matches every single element, including <html>, <body>, and all children, so styles apply everywhere.
💡 Remember: '*' means 'all elements' with no exceptions.
Why does the universal selector have the lowest specificity?
Because '*' matches all elements but is very general, it can be overridden by more specific selectors like classes or IDs.
💡 More specific selectors win over '*'.
Property Reference
PropertyValue AppliedVisual EffectCommon Use
*color: red;Changes text color of all elements to redApply universal text color or reset styles
*border: 1px solid black;Adds black border around every elementDebug element boundaries visually
*margin: 0;Removes default margin from all elementsNormalize spacing across browsers
Concept Snapshot
Universal selector '*' matches every element on the page. It applies styles with lowest specificity. Commonly used to reset or apply global styles. Example: '* { margin: 0; }' removes default spacing. Be careful: it affects all elements including <html> and <body>. Specific selectors override universal selector styles.

Practice

(1/5)
1. What does the CSS universal selector * do?
easy
A. Selects elements with a specific class
B. Selects only div elements
C. Selects all elements on the page
D. Selects elements with a specific ID

Solution

  1. Step 1: Understand the universal selector symbol

    The * symbol in CSS means "all elements" without exception.

  2. Step 2: Apply the selector meaning

    Using * targets every element on the page, regardless of tag, class, or ID.

  3. Final Answer:

    Selects all elements on the page -> Option C

  4. Quick Check:

    Universal selector = all elements [OK]
Hint: Remember * means every element on the page [OK]
Common Mistakes:
  • Thinking * selects only specific tags
  • Confusing * with class or ID selectors
  • Assuming * targets only visible elements
2. Which of the following is the correct syntax to apply a margin of 0 to all elements using the universal selector?
easy
A. # * { margin: 0; }
B. . * { margin: 0; }
C. all { margin: 0; }
D. * { margin: 0; }

Solution

  1. Step 1: Identify the universal selector syntax

    The universal selector is just * without any prefix like dot or hash.

  2. Step 2: Check the CSS rule format

    The correct CSS rule to apply margin 0 to all elements is * { margin: 0; }.

  3. Final Answer:

    * { margin: 0; } -> Option D

  4. Quick Check:

    Universal selector syntax = * { ... } [OK]
Hint: Universal selector is just * without dot or hash [OK]
Common Mistakes:
  • Adding dot or hash before *
  • Using invalid selector names like 'all'
  • Forgetting curly braces
3. Given this CSS code:
* { padding: 10px; }
p { padding: 5px; }

What will be the padding of a paragraph (<p>) element?
medium
A. 10px
B. 5px
C. 15px
D. 0px

Solution

  1. Step 1: Understand selector specificity

    The universal selector * applies padding 10px to all elements, but the p selector is more specific.

  2. Step 2: Apply CSS specificity rules

    Since p selector is more specific than *, the paragraph's padding will be 5px, overriding the universal selector.

  3. Final Answer:

    5px -> Option B

  4. Quick Check:

    More specific selector wins = 5px [OK]
Hint: More specific selector overrides * [OK]
Common Mistakes:
  • Assuming * always overrides other selectors
  • Adding padding values instead of overriding
  • Ignoring CSS specificity rules
4. You wrote this CSS:
* { font-size: 16px }

But the browser ignores it and uses default font sizes. What is the likely error?
medium
A. CSS file not linked properly
B. Universal selector cannot set font size
C. Font size must be in quotes
D. Missing semicolon after 16px

Solution

  1. Step 1: Check CSS syntax

    The CSS rule * { font-size: 16px } is syntactically valid; a trailing semicolon is optional at the end of a rule.

  2. Step 2: Understand common issues

    If valid CSS is ignored by the browser, the stylesheet is likely not linked properly in the HTML with a <link rel="stylesheet" href="..."> tag.

  3. Final Answer:

    CSS file not linked properly -> Option A

  4. Quick Check:

    No styles applied? Check <link> tag [OK]
Hint: If * styles not applying, verify CSS file link [OK]
Common Mistakes:
  • Thinking universal selector can't style fonts
  • Using quotes around numeric values
  • Ignoring CSS file linking issues
5. You want to reset margin and padding for all elements but keep links (<a>) with no margin and 5px padding. Which CSS achieves this?
hard
A. * { margin: 0; padding: 0; } a { padding: 5px; }
B. a { margin: 10px; padding: 5px; } * { margin: 0; padding: 0; }
C. * { margin: 0; padding: 5px; } a { margin: 0; padding: 0; }
D. * { margin: 0; padding: 0; a { padding: 5px; } }

Solution

  1. Step 1: Reset all elements margin and padding

    The universal selector * { margin: 0; padding: 0; } sets margin and padding to zero for all elements.

  2. Step 2: Override padding for links

    The selector a { padding: 5px; } specifically sets padding to 5px for all <a> elements, overriding the universal selector.

  3. Final Answer:

    * { margin: 0; padding: 0; } a { padding: 5px; } -> Option A

  4. Quick Check:

    Specific selector overrides universal [OK]
Hint: Use * first, then override with specific selector [OK]
Common Mistakes:
  • Placing universal selector after specific selector
  • Nesting selectors incorrectly
  • Setting wrong padding values