Universal selector in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What does the universal selector (*) do in CSS?

Choose the correct description of the universal selector * in CSS.

A Selects only elements with a class attribute.

B Selects only elements with an ID attribute.

C Selects all elements on the page.

D Selects only paragraph elements.

💡 Hint

Think about what * means in everyday life, like a wildcard.

The universal selector * matches every element in the document, regardless of type, class, or ID.

❓ rendering

intermediate

What color will all elements have with this CSS?

Given this CSS code:

* { color: red; }

What color will the text of all elements be?

A No color change

B Blue

C Black

D Red

💡 Hint

The universal selector applies styles to every element.

The universal selector * applies the color red to all elements, so all text will appear red.

🧠 Conceptual

advanced

Which CSS rule will NOT be overridden by the universal selector?

Consider these CSS rules:

p { color: blue; }
* { color: red; }

What color will paragraphs have?

A Blue, because the paragraph selector is more specific.

B Red, because the universal selector applies to all elements.

C Black, because no color is set explicitly.

D Green, because of browser default styles.

💡 Hint

Think about CSS specificity and which rule wins.

The paragraph selector p is more specific than the universal selector *, so paragraphs will be blue.

❓ accessibility

advanced

Why should you be careful using the universal selector (*) for styling?

Which is a potential accessibility problem when using * to style all elements?

A It can override focus outlines, making keyboard navigation harder.

B It automatically adds ARIA labels to all elements.

C It disables screen readers on the page.

D It prevents images from loading.

💡 Hint

Think about how styling focus outlines affects users who use keyboards.

Using * to remove or change focus outlines can make it hard for keyboard users to see where they are on the page, hurting accessibility.

❓ layout

expert

What is the effect of this CSS on layout?

Given this CSS:

* { margin: 0; padding: 0; box-sizing: border-box; }

What does this do to the page layout?

A Adds default margins and paddings to all elements.

B Removes all default spacing and makes sizing easier to control.

C Breaks the layout by hiding all elements.

D Only affects elements with class names.

💡 Hint

Think about what margin, padding, and box-sizing control.

This resets all elements' margin and padding to zero and sets box-sizing to border-box, which includes padding and border in element size, making layout sizing predictable.

Practice

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