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 Dustin Kehrli
Dustin Kehrli
2,694 Points

Multiple class selectors syntax?

I have a question about multiple class selectors. I noticed the instructor uses comma's to select two classes. Can you select two classes with out the comma?

Are both of these statements equivalent?

<div class="first second">
</div>

.first.second {
}

OR

.first, .second {
}

Both seem to work the same way?

1 Answer

Tobias Helmrich
Tobias Helmrich
31,604 Points

Hey Dustin,

no, they're not equivalent. In your case however they seem to be equivalent because your div has both classes.

The first selector

.first.second {
}

selects elements with the class of first that also have the class of second. The other selector

.first, .second {
}

on the other hand, selects all elements with the class of first or the class of second. I hope that helps, if you have further questions feel free to ask! :)

Dustin Kehrli
Dustin Kehrli
2,694 Points

Weird that I cannot find the proper documentation on these class selectors.

So from what I gather is:

.first.second {
}

selects elements with both classes

.first .second{
}

This selector is picking .second within the .first class? Correct?

.first, .second{
}

This is saying choose the .first class AND choose the .second class.

Tobias Helmrich
Tobias Helmrich
31,604 Points

Yes, unfortunately it's really a bit hard to find a proper documentation on that matter. Exactly, everything is correct!