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 Modular CSS with Sass Sass and BEM BEM Challenge

Josh Vaughn
Josh Vaughn
2,289 Points

I'm having trouble getting through Challenge Task 2 of 2 "use a parent selector reference for the active variation"

This is the challenge at the end of the BEM mixins unit. None of my solutions work, and I had no trouble with the lessons.

What is the correct solution that passes the question? Thanks

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Josh,

Could you please post your html and css so we can take a look and help you out.

3 Answers

Josh Vaughn
Josh Vaughn
2,289 Points

Wayne - thanks for the reply. I managed to complete the challenge question with this:

.menu {
    margin: 1em 0;

    &__link {
        color: blue;
        padding: .5em;

        &--active {
            color: red;
        }
    }
}

Whereas (as I recall, this was the other nite) I was trying to something like this:

.menu {
    margin: 1em 0;

    &__link {
        color: blue;
        padding: .5em;
     }

    &__link--active {
         color: red;
    }
  }

... which was not passing your compiler. I haven't had a chance to test whether or not this is a limitation with Sass, or whether it is only a quirk with your testing sandbox here. Do you know? Thanks

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Josh,

The reason your code didn't pass was because you had a closing bracket before &__link--active so there was no parent to select, so you get __link--active.
By removing that closing bracket as you did in the code that passed, you allowed the parent to be selected, so &__link--active translated to .menu__link--active.

Hope this helps.

Josh Vaughn
Josh Vaughn
2,289 Points

Ahh ok, that makes perfect sense thanks!

I was assuming that the parent selector would always jump up to the root and grab the parent, which is not how it actually works.

A.J. Kandy
PLUS
A.J. Kandy
Courses Plus Student 12,422 Points

Just for anyone else who got stuck on this trying to write &:active instead of &--active, it's easy to be misled into thinking they mean the :active pseudo-class instead of a new --modifier BEM class - I got hung up on this for a while.