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 Kevin Murphy
Kevin Murphy
24,380 Points

Confusion when combining multiple classes to target an element

I'm getting confused when combining multiple classes, particularly the order. For instance -

Say you have: 

<p class = "info-label upcoming"> lorem ipsum lorem ipsum </p>

If I want to target this paragraph with BOTH classes it seems I could type 

.info-label .upcoming p {color: blue;}

OR 

 .info-label.upcoming p {color: blue;}

but the correct syntax is actually 

p.info-label.upcoming {color: blue;}

I'm not 100% clear why the first two are invalid. Any clarification would be great!

3 Answers

Travis Neiderhiser
Travis Neiderhiser
1,027 Points

Kevin,

The reason the first two are incorrect is because you are saying "Inside .info-label then inside .upcoming grab the P element and do this style" which would look something like this:

<div class="info-label">
   <div class="upcoming">
      <p>Styling This Text</p>
   </div>
</div>

Your second example would be:

<div class="info-label upcoming">
   <p>Styling This Text!</p>
</div>

Does that make sense?

Kevin Murphy
Kevin Murphy
24,380 Points

Hi Travis,

I think I finally get it! Your examples in "plain english" illustrated with code snippets were fantastic. Still feels a little dicey depending on the source code I'm working with, but this provides me with a much better understanding. I think with a little more practice I'll have it solid. Thanks!

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

Hi Kevin.

All you need is:

.info-label.upcoming {
color: blue;
}

You should not require the p unless you have other elements that share the same class and want top style them differently.

Kevin Murphy
Kevin Murphy
24,380 Points
Kevin Murphy
Kevin Murphy
24,380 Points

Hi Rich, thanks for the reply. I would be assuming that other elements share the same class. I find myself getting confused on the syntax for multiple classes when targeting a specific element. Any rule of thumb you can share on that?

Seems one would be to start with the classes as if there were no element and then add the element in the front?