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.