Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Basic Selectors Intro to Selectors

Henning Holm
Henning Holm
4,163 Points

Universal selector overwrites all other selectors?

At 2:40 Guil says universal selector overwrites all other selectors, is that correct? It doesn't overwrite the rules assigned to my id and classes?

3 Answers

Steven Parker
Steven Parker
216,136 Points

I think he means it overrides all default rule selectors.

It still obeys cascading and specificity rules, so custom rules placed after it will still be effective.

Callum Anderson
Callum Anderson
8,837 Points

I noticed this in the video too - it could have been phrased differently. Anyway, as Steven states above - any rules placed on specific elements, classes or IDs will override the universal selector rule.

* { margin: 0; } ...will be overridden by...

body { margin: 10px; } ...which would be overridden by...

header { margin: 18px; } ...and so on...

first check these Override Rules

-inline style > internal style

-inline style > external style

-external style = internal style (the one written the last will override the previous one, for example

<head> <style> body { background-color: black; } </style> <title>tes test..</title> <link rel="stylesheet" href="styles.css"> </head>

and in styles.css:

body{ background-color:blue; }

since internal style with black background color came before importing external style from styles.css in which background color set as blue, then the final result will be blue background, and vice versa...

  • the only reason for universal selector to be external style is that it's written in an external css sheet, but there's a big difference between ordinary external style selector and universal selector,
  • this difference is that universal selector can be override by internal style, no matter what's the order of them, the internal style will always win and have bigger strength and apply it's changes, unlike the ordinary external style selector which have the same strength of internal style and the one who' written last it's styles will be applied (writing order's taken into consideration)