Updated Responsive Design library: Solution will not work (Step 52 Learn Basic CSS)

Hi everyone,
I was just going through the updated Responsive Design Library.
I think there’s a bug in lesson 52 of ‘Learn Basic CSS by Building a Coffee Menu’ - on double class selectors. The exercise asks to add another class (.dessert) to the already existing class selector for the .flavor class.
It won’t accept the answer:
.flavor.dessert{…}
I may well be wrong, but please let me know if that’s not the case :slight_smile:
Thanks in advance for your help!

1 Like

Could you post a link to the lesson, and share your code?

I believe this selector would be for an element that has both a class of flavor and a class of dessert. Is that what the lesson wants?

<element class="flavor dessert">

Can you see changes being made to the right element with this selector? You might also take a look at the CSS before it. Perhaps you have an unclosed previous selector.

Please post your full code and a link to the challenge. Thanks


Look at the example above in the code

h1, h2, p {

}

You aren’t adding the second class quite correctly.

It’s asking for a selector list. It’s just two selectors that share the same styles.

1 Like

Thanks for the quick reply!
Here is the challenge.
The existing css file shows:

.flavor {
  text-align: left;
  width: 75%;
}

We want to apply these same properties to the dessert class, which is declared in the html file as:

<p class="dessert">Donut</p>

.As the exercise puts it: ‘’ Since the flavor class selector already has the properties you want, just add the dessert class name to it.’’

I thought that my solution in the previous post would work, but the answer I always get is:

Hint

You should add the .dessert selector to your .flavor selector.

I would be grateful for an explanation:)
Thanks in advance!

“Since the flavor class selector already has the properties you want, just add the dessert class name to it.”

I can definitely see how this can be interpreted in a couple of different ways. Might be a little clearer if the instructions read something like:

“Since the flavor class selector already has the properties you want, add the dessert class to that selector so it applies to elements with either the flavor class or dessert class.”

You may want to look back at this step:

Thanks JeremyLT,

I didn’t realise you wouldn’t need the . to call classes by name in css.

I tried to do as per your previous suggestions, but the same message appears.

Could this be a bug in the newly launched library for Responsive Design?

Thanks again

What is your updated code?

I didn’t say that you should delete the .

You need to keep the dot; you just aren’t listing multiple classes correctly.

1 Like

Thanks, this worked!

I was looking at this for double class selector, hence my confusion. I’m not sure that I understand why the previous solution won’t work, but thank you for enlightening me :slight_smile:

If you try adding and deleting the comma and watching the preview panel, you can see why the comma is needed.

The syntax you found is for a single element with multiple classes, not any element with one of the classes in the list.

this is the right solution

Mod Edit: SOLUTION REDACTED

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

3 Likes