Class="no-divider"

HTML-CSS
1

Hello guys,

I’m a noob. I just need to know why do I not see a .no-divider selector in my CSS when there’s a class=“no-divider” in my HTML file? I am pasting the HTML file and CSS file below:

<!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 class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
      <div class="divider"></div>
      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
      <p class="indent no-divider">Dietary Fiber 4g</p>
      <div class="divider"></div>
      <p class="indent no-divider">Total Sugars 12g</p>
      <div class="divider double-indent"></div>
      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span>
      <div class="divider"></div>
      <p class="no-divider"><span class="bold">Protein</span> 3g</p>
      <div class="divider large"></div>
      <p>Vitamin D 2mcg <span>10%</span></p>
      <p>Calcium 260mg <span>20%</span></p>
      <p>Iron 8mg <span>45%</span></p>
    </div>
  </div>
</body>
</html>

* {
  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 {
  margin-left: 1em;
}

.double-indent {
  margin-left: 2em;
}

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

Can you give us more information? Is this a challenge, and were you supposed to add the class yourself? Could it have been deleted by accident? If its a challenge then please paste the link to the challenge here so we can have better insight

3

You have some css here that uses the no-divider class

4

I was coming to ask the same question. I understand the pseudo selector. If there is an element p that does not have a class with a value of “no-divider” then you should apply a border with 1px to the bottom.

But WHY is there no .no-divider rule on its own. How does HTML know that for the p elements that do have a class with value of “no-divider” you should remove the border (i.e. basically border-bottom: 0;).

This is driving me insane

5

I just realized what it is.
@jmmariano, you and I understood the function of the pseudo selector wrong. So to understand it better, you need to phrase it like this:
I want you to apply a border-bottom of 1px to all P elements that do NOT have a no-divider. If a P element has a no-divider, then don’t do anything. You don’t have to add a selector that says “hey don’t add borders to anything that has no-divider” since there is no selector in the CSS file that applies borders in the first place except for divider selector but that has nothing to do with what we have here. So, any P element that has the no-divider class, will not have any borders. And that’s why you add a div element with a class divider after every P element that has a no-divider class.

I hope this helps.

1 Like