Learn Basic CSS by Building a Cafe Menu - Step 51

Tell us what’s happening:
Describe your issue in detail here.
Not sure what is the issue here and why the code is not working.
its aksing me to add the .dessert clas to .flavor class which i do and its not working.

Your code so far

<!-- file: index.html -->
<!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">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <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>
/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

.item p {
  display: inline-block;
}


/* User Editable Region */

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

/* User Editable Region */


.price {
  text-align: right;
  width: 25%
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/109.0

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 51

Link to the challenge:

The way you wrote this will not select elements whose class is flavor or elements whose class is dessert.
This will instead look for elements whose class attribute contains both flavor and dessert.

Use a comma between the class selectors if you want to select elements with either or of the classes

ive tried with and without comma, with and without dot,separated and together.
even bwfore asking ive looked selecting multiple css classes and what i have wrote shouls be working. im really out of ideaa here

okay, show me the correct code and I will try it to see if there is any other issue with it.
(as I said, what you have above is not correct)

i cant show you the correct code. form what ive seen there are no commas in selecting. ill take a deeper look.

Just place a comma in between the two dotted class names.

If that doesn’t work then share the code here so I can test it and let you know how to proceed further.

1 Like

that has worked…thanks. they could have hinted towards comma a bit, and maybe show an example as thes did in some other steps.

In an earlier step they showed how to do this. But they only teach the concept once (no repetition in order to keep the steps concise)

1 Like

i remember that one, but since those are elements it didnt ocur to me to use it like that for selectors, nor i did not see a single example of that online, but i did look briefly. thanks again, you have been helpfull.

1 Like

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