Learn Typography by Building a Nutrition Label - Step 49

Tell us what’s happening:
Describe your issue in detail here.
I cannot solve step 49 which asks:
Modify your .daily-value p selector to exclude the .no-divider elements.
I have tried all the various combinations of solutions online and in previous forums for the same problem but it still persists.

I don’t really understand why we are putting the ‘no-divider’ in the

% Daily Value *

part either.

Would really appreciate it if someone could explain and could point me in the right direction/tell me what I am doing wrong in the CSS code. Thank you
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>
    <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
    </div>    
  </div>
</body>
</html>
/* file: styles.css */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

header h1 {
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px
}

p {
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.medium {
  height: 5px;
}

.small-text {
  font-size: 0.85rem;
}


.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

.indent {

/* User Editable Region */

  margin-left: 1em;

.daily-value p{border-bottom: 1px solid #888989;}

.daily-value p:not(.no-divider){border-bottom: 1px solid #888989;}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Challenge: Learn Typography by Building a Nutrition Label - Step 49

Link to the challenge:

Hello!

It provides the following starting point.

.daily-value p {
  border-bottom: 1px solid #888989;
}

Now, using the example provided in the instructions:

div:not(#example) {
  color: red;
}

we can see that we need to add the :not and what we wish to exclude placed within () like :not() to the existing selector.

Example:
div h1:not(.open) {
color: purple;
}

Hope this helps you.

You are only meant to edit the existing selector. Do not add a new one. You have also changed the location of where you edit the code (you have gone into the .indent selector).

This code you have now is correct. Copy that.

.daily-value p:not(.no-divider){border-bottom: 1px solid #888989;}

Then reset the challenge and paste it back in (overwriting the .daily-value selector and all its style)

Oh I get it now! Thank you, that helped a lot :slight_smile:
p.s.-I didn’t copy-paste because I wanted to see where I was going wrong but thanks for providing the code, that made it easier to check myself. and find where I missed closing the curly bracket of .indent !

1 Like

Okay yes, I understand…though I am still confused why we wanted to not include .no-divider.
Solved the problem though, Thanks a lot! :slight_smile:

1 Like

You are doing great!

Good for you using your own initiative to find out how to code it correctly without copying and pasting. :clap:

Happy coding! :slight_smile: