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 CSS Foundations Selectors Grouping and Modifying Selectors

Mike Trippler
Mike Trippler
2,642 Points
Posted by Mike Trippler
Mike Trippler
2,642 Points

How would I know which shape I am dealing with in CSS if class selectors are non descriptive?

Can someone enlighten me? I like the concept of condensing the CSS and making cleaner code. However, if I were to take the final CSS in this video and look at it for the first time, how would I know div class="base" is the square and div class="base border-radius" is the circle? Even by looking at the CSS I guess you could figure it out by the values but still doesn't it seem a little confusing?

1 Answer

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

Think of Guil's example. You can group any selectors together that the same CSS styles. But it doesn't mean you can't use selectors more than once and in most cases it's best practice.

So you could use a style like...

.circle, .square. .ellipse {

   background:-color:   #44444;


}

If you wanted them all to be the same colour, you'd put them in the same group

But then, you can use the same selectors again, only separately. And give them styles that inherit the same styles, in this case, the same background colour that we've just declared, but take on unique rules and values too. Hope this helps. :-)

Mike Trippler
Mike Trippler
2,642 Points
Mike Trippler
Mike Trippler
2,642 Points

I get it now. I got too wrapped up in the fact that we were dealing with shapes. The purpose like you said of this lesson was to show how to make cleaner CSS and group common selectors that share the same CSS styling and condense our code, as well as reusing it to style other elements on our page. Thanks for the response!