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 3lg3
3lg3
13,631 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,631 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
231,269 Points
Steven Parker
Steven Parker
231,269 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
231,269 Points
Steven Parker
Steven Parker
231,269 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
231,269 Points
Steven Parker
Steven Parker
231,269 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.