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

Posted by Gabino Garcia
Gabino Garcia
4,407 Points

Universal selector clarifications

Following along with the CSS selectors video regarding the usage of CSS selectors..he mentioned something regarding inheritance values would not work when using universal selectors thus losing inherited values from it's parent values..or something close to that..

From what I understand this parent value would be the user agent style used by the browser right? I tried playing with it..

* {
    color: red; /* This becomes the default color. */
}

h1 {
     color: #0099cc;
}

the HTML code would be: (the part in question at least)

    <body> 
        <h1>I'm learning about <span>CSS Selectors</span></h1>
        <p>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque</span>
  sit amet vestibulum libero, nec dignissim quam. Nulla accumsan sem in erat fermentum vehicula. Vestibulum porttitor urna mi, placerat blandit eros pulvinar id. Ut eget sem enim. Pellentesque vulputate</p>

so with the universal selector all of the font's color would be red right? and the settings for h1 would still be applied too right?. Yet somehow the ones enclosed with span didn't change color. It remained red like the rest of the fonts..getting rid of the color setting in the universal selector would apply the h1 color settings to the ones enclosed with the span tag..

Is that an example of what Sir Guil mentioned regarding CSS inheritance canceled by using universal selectors?

thanks

4 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Span's and H1's are different. A span isn't going to inherit an H1's class regardless.

Here is a cheesy codepen to play with. http://codepen.io/anon/pen/mFDqG

You can see what get's changed as you removing styling. To answer some of your questions.

  • Q: so with the universal selector all of the font's color would be red right?

  • A: Yes

  • Q: and the settings for h1 would still be applied too right?.

  • A: Yes, and selecting H1 is more specific than the universal selector, so the H1 style overrides it.

  • Q: Yet somehow the ones enclosed with span didn't change color.

  • A: That is because they are spans.

  • Q: It remained red like the rest of the fonts..

  • A: That's correct

  • Q: getting rid of the color setting in the universal selector would apply the h1 color settings to the ones enclosed with the span tag..

  • A: No, spans and H1's are completely different. They do no inherit each other's style.

I'm not sure what question you are on, but I hope this helps.

Gabino Garcia
Gabino Garcia
4,407 Points
Gabino Garcia
Gabino Garcia
4,407 Points

Thanks for your reply..

I'm thinking that I still don't understand how CSS inheritance works. Here's what I get so far:

  • websites would inherit user agent, user styles from the browser
  • author styles takes precedence over both user agent and user styles
  • unless I didn't assign a CSS value to a particular HTML tag then no author style would be applied thus going back to user agent or user styles.
  • Noting all of the stuff I've mentioned above..parent value = author style (over) user agent, user styles..child value = declared selectors (CSS code) e.g. h1 { font-size: 10px }
  • So using a universal selector overrides them?

thanks

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

The universal selector will override user agent styles (which is why it's usually a good idea to use normalize.css), but specific author styles will override styles from the universal selector. The codepen shows that.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

You might be interested in this http://www.fiveminuteargument.com/blog/stop-breaking-inheritance