Learn Basic CSS by Building a Cafe Menu - Step 52

HTML-CSS
1

Hey guys

Can anyone help me with this, how can i combine two selector I tried this
.dessert.flavor
.dessert .flavor
and it did not work, I am stuck!

  **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">
    <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>

/* 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;
}

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



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

  **Your browser information:**

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

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

Link to the challenge:

2

u should answer like tis .target, .target {code: code;}

3

Hey! welcome to the freeCodeCamp’s community forums.

Selectors in CSS are used to “select” HTML elements in your code and then style them using CSS rules. When you wish to target very specific elements in your code, you need at least a surface knowledge of something called combinators.

Combinators allow you to target elements under specific conditions. for example, if i want to select only the button elements that are inside of p elements in my code, i can use the descendant combinator.

so if my HTML looks like this:

<button> one </button>

<p> this is a paragraph 
    <button> two </button>
</p>

i can use this css to style only the buttons which are nested inside of the p elements.

p button{
    background-color: red;
}

the above css will change the background color of the button with the text two inside of it to red and will not have any effect on the button one.

In the same way, you’re unknowingly using the descendant combinator, What you’re basically telling the browser is this:

select all of the elements that have the class of .flavor and are nested inside of .dessert elements.

which is not what the instructions are about.

To reuse the same styles for multiple selectors, you can use a , between the two selectors and your tests should pass.

if you want to learn more about CSS combinators, here’s an awesome resource.

Hope this helps! :smile:

4

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