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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Base class selectors

I love it when Treehouse teaches me something new about concepts I thought I had down to a Tee.

I was taken by the things you do with classes and using more than one class in an attribute declaration.

But I wasn't quite clear on how it worked.

So you'd have a base class of .base (to be original) and a second class of I don't know, .header. which you could declare like this. 

<div class = "base header"></div>

I thought doing such a declaration would give you an error. How does it work? Does header inherit from base in order?

3 Answers

Ruben Leija
Ruben Leija
4,051 Points

That is exactly how it works. You may have multiple names in a class attribute and you would separate them just as you did. In a ID attribute, you would only have 1 name for the specific element. Aside from that, your probably wondering how you call the second class name. You call it the same way you do the first name. Check the bottom list for examples to how to call that element.

Examples:

.base // Calls all elements with the class name base

.header // Calls all elements with the class name header

.base.header // Calls all elements with the class names of base and header

div.base // Calls all div elements with the class name base

div.header // Calls all div elements with the class name header

Calvin Nix
Calvin Nix
43,828 Points
Calvin Nix
Calvin Nix
43,828 Points

Yes the element just inherits both classes. So in the case that both classes have things that are similiar (e.g. Both define a different color) then the color that would be executed would depend on the order of the css code. So the class that is declared first in the css code would be overwritten by the second class.

Just wait till you get get into JQuery. You are able to do cool things like addClass() :)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Know a bit of jQuery already... just a bit, ;) Just goes to show though I was right to start with the HTML web design track because you can never learn enough. :)

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Great to know I wasn't far off. I just found myself thrown by the concept so wasn't sure I was taking it in. But it's clever how you can use one declaration to accomplish many things and the HTML and CSS still look clean. Thanks for clarifying. :)