Combining two classes that have same css properties and values respectively

HTML-CSS
1

Screenshot (96)
Screenshot (96)1920×1080 156 KB

Hello guys! Glad to be part of this forum of creatives. I am currently stuck at “step 52” of “learning css basics project” . Tried to combine as instructed, but code not passing. I would appreciate any assistance to help resolve this. Thank you.

2

Welcome to the forum.
It’s better not to use screenshots.
You can post your code.
When writing post, press ctrl-e, you’ll see how to make code like

this

Also, try to provide link to the challenge you have issue with

3

Okay @admit8490 thanks for pointing out. Will do just that.

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

below is the link
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-52
4

syntax issue here
Consider some research about such selectors. You can start here:

Also, one little thing: link to the challenge would be more usable, if placed outside code block.

5

Thanks, but still yet to figure it our from the my research, cos everything still points to this syntax as correct

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

Well you are closer now, but still not there yet.

This means “.flavor elements, which are children of .dessert elements”

You need ‘.flavor elements and .dessert elements’, right?

Take a close look at the very first example in the link I gave you. There is a decent explanation

7

This is the instruction of the step 52 below:

Step 52

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…

This is code below originally

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

I see. Some part of instruction is confusing? Could you specify?

9

Below is the html code snippet below: Hope it helps with the clarity

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <header>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
      </header>
      <main>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>
10

I don’t understand, how HTML code related to the issue.
Originally it was all about correct syntax of CSS selector and you are very close to the right solution

This is very close

11 
<article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>

That is the HTML CODE portion to the CSS

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

Instruction

Step 52
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.
12

well, they are talking about selector for this one:

What part is the problem? The below? Or the above?

Maybe some issues with this phrase?

13

I had already added the dessert class as shown to you earlier

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

but code still not passing.
14

Yes, I get it.
There is a reason for this.

This is not correct usage of multiple selector for what we are trying to achieve in this step.
Something is missing between
.dessert
and
.flavor

In the link I gave you, there were examples just for this case.

I can’t give you direct solution, it’s considered not the best practice in this community.

15

Thanks a lot! I understand. And I will look more in between the lines to solve this challenge.

16

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.