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 Basics (2014) Basic Selectors Intro to Selectors

Henning Holm
Henning Holm
4,163 Points
Posted by 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
231,268 Points
Steven Parker
Steven Parker
231,268 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
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...

Ahmed Mohamed Fouad
Ahmed Mohamed Fouad
11,735 Points
Ahmed Mohamed Fouad
Ahmed Mohamed Fouad
11,735 Points

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)