Responsive web design step 52

  • I have been struggling with STEP 52 of the Responsive web design. below is what it asks, and I did as it asked, but to avail:

Something does not look right. You added the correct class attribute value to the p element with Donut as its text, but you have not defined a selector for it.

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

My answer:
.flavor.dessert {

text-align: left;

width: 75%;

}

Not quite. Here’s a hint:

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

Please what is wrong with my answer?

I’ll agree, the wording of this step might be slightly ambiguous. What this is saying is that you already have the following properties defined on the flavor class:

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

You now want those same properties defined on the dessert class. So instead of creating a brand new rule to do thus, which would basically duplicate the above rule, merely add the dessert class to the above rule. In other words, both classes share the same rule.

What you did:

.flavor.dessert {

Isn’t quite what this is asking. This says that an element that has both flavor and dessert classes at the same time will get the properties in the rule. What you want is for an element that has EITHER the flavor class OR the dessert class to get the properties in the rule.

By the way, please include a link to the step next time so it is easier to find.

1 Like

Thanks for your response.
I will post the link next time. However, I found out that I have to put comma to be able to submit my answer, which was unusual about class selector, to my knowledge.

1 Like

The comma allows you to have multiple classes use the same rule.

.flavor, .dessert {
  ...
}

This says "Apply the following properties to any element that has the flavor class or the dessert class. The element doesn’t need to have both of them, just one of them.

1 Like

It is called a selector list.