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

Joseph Wagner
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Wagner
Android Development Techdegree Graduate 27,137 Points
Posted by Joseph Wagner
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Wagner
Android Development Techdegree Graduate 27,137 Points

CSS Nested Group of Selectors

Hi, I'm having some problems with selecting some CSS elements, could you help me and let me know what I'm doing wrong?

I would like to select three objects and set to display none, which I think would look like this: 

.sfwd-lesson .relatedposts2, .fblike, #subscribe {display:none;}

However it doesn't select these properly and applies the styles to each element individually it appears. So now I have to have a wordy chunk like this. 

.sfwd-lessons .relatedposts2 {display:none;}
.sfwd-lessons .fblike {display:none;}
.sfwd-lessons #subscribe {display:none;}

Is it not possible to have a nested group of selectors like I wrote in the first section, or how does it need to change to apply correctly?

Thanks, Joseph

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Joseph,

You can separate multiple selectors with commas like you have in the first example and that would be the recommended approach so that you're not repeating yourself.

A couple of differences I notice though are that you're using .sfwd-lessons (s on the end) in the working example. Also, the second two selectors are more specific than what you have in the 1st version. Whether you need that higher specificity or not depends on your previous css.

If .fblike and #subcribe did not work then I'm assuming you have a specificity problem with those and you needed the higher specificity by adding a parent class in front.

.sfwd-lesson .relatedposts2 might not have been working simply because of the missing 's'.

Joseph Wagner
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Wagner
Android Development Techdegree Graduate 27,137 Points
Joseph Wagner
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Wagner
Android Development Techdegree Graduate 27,137 Points

Thanks for spotting the s, that was part of the problem. As you said it was a specificity problem, I guess I needed to put the parent class in front.

I ended up with ```css .sfwd-lessons .fblike, .sfwd-lessons #subscribe, .sfwd-lessons .relatedposts2 {display:none;}

I was just thinking that I could apply a parent .sfwd-lessons to the three children at once, but I guess not?
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

They're independent of each other. The parent doesn't carry over.

I don't know if you know anything about sass but it would let you do something like what you wanted to do here.

.sfwd-lessons {
  .fblike, 
  #subscribe,
  .relatedposts2 {
    display:none;
  } 
}

The 3 key selectors are nested inside the .sfwd-lessons parent selector and so that parent would be added to the front of the 3 selectors nested inside. This scss will compile into the css you left in your comment.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome. Do you mean you were already using sass?

Sorry, if you were. I gave my original answer thinking it was pure css.

Mark Christiansen
Mark Christiansen
7,622 Points
Mark Christiansen
Mark Christiansen
7,622 Points

Test

Mark Christiansen
Mark Christiansen
7,622 Points
Mark Christiansen
Mark Christiansen
7,622 Points

Test