Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Posted by 3lg3
3lg3
13,521 Points

Having trouble choosing the correct selectors, i.e. why '.col' and not '.primary col, .secondary.col'?

My attempt at this solution involved targeting '.primary col' and '.secondary col' and I was able to make them 50% in width, and stack the columns, but couldn't bring them side-by-side. The solution targets just '.col'.

I seem to have a lot of trouble choosing the correct selector when they have multiple classes. Can someone explain why mine didn't work?

.primary col, .secondary col { ... }

And if anyone has any tips for choosing the correct selector when they have multiple classes, please share.

3lg3
3lg3
13,521 Points

I noticed after I posted my question that the code structure collapsed to one line. I should have checked out the Markdown Cheatsheet!

My question has more to do with trying to target the two sections of text (primary col and secondary col). I used .primary col in my CSS but the solution used just .col (trying not to make this confusing). I had limited success with my approach. Just trying to figure out why .col works, but .primary col (and .secondary col) didn't work.

I seem to struggle when there are multiple classes assigned to the content I want to style.

Steven Parker
Steven Parker
220,477 Points
Steven Parker
Steven Parker
220,477 Points

The first part of my answer explains why it didn't work.

2 Answers

B.B. Groeneveld
B.B. Groeneveld
2,826 Points

Hi, I had the same issue, so I just edited the HTML div's from "primary col" and "secondary col" into "primary-col" and "secondary-col". Then I target these in my style.css the way you first did, and that works perfectly fine!

Steven Parker
Steven Parker
220,477 Points
Steven Parker
Steven Parker
220,477 Points

It looks like you're putting a space between the class names and also forgetting the period in front of "col". Either (or both) of these will prevent the selector from working. So instead:

.primary.col, .secondary.col { ... }

But even if you get it right, if all you want is to target the "col" class, these selectors would be excessively specific. You could select both elements using just that class alone:

.col { ... }
Marcel Konjata
Marcel Konjata
3,245 Points
Marcel Konjata
Marcel Konjata
3,245 Points

For everyone reading this response. This response is correct and doesn't deserve the downvotes.

Steven Parker
Steven Parker
220,477 Points
Steven Parker
Steven Parker
220,477 Points

Thank you for your comment. From time to time I've gotten downvotes with no idea why. It would be nice when someone disagrees with an answer if they would post a comment along with the downvote.