Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Selectors Type Selectors

Posted by SABCD ABCD
SABCD ABCD
3,414 Points

Clarification on how a universal selector works?

Guil says that universal selectors take precedence over all other selectors. My question is, if we were to place the universal selector at the top, followed by another selector (see example below), which one will be shown?

eg:

  • { margin: 0; }

p { margin: 10px; }

Will the margin for the p selector be 0 or 10px?

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Sanjay,

It will be 10px and even if you reverse the 2 rules the paragraph will still be 10px.

The universal selector has zero specificity so you can override it with any selector. That is why you can put the p rule 1st and the margin at least for the paragraph would remain 10px. All other elements will still be 0.

p {
  margin: 10px;
}

* {
  margin: 0;
}

/* paragraph is still 10px */
geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

That's something I didn't know at all, haven't noticed (the fact * has no specificity ). Thank you, I deleted my post.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi geoffrey,

You're welcome. I don't remember anything being wrong with your answer though.

SABCD ABCD
SABCD ABCD
3,414 Points

That cleared up my confusion. Thanks!

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

I recommend you to google css selectors precedence and read more for clear understanding. :)