Build a Book Inventory App - Build a Book Inventory App

Programming HTML-CSS
1

Tell us what’s happening:

my span elements are supposed to target the descendants but its encountering errors. i cant seem to see where i’ve gone wrong.

Your code so far

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

<head>
  <meta charset="utf-8">
  <title>Book Inventory</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>Book Inventory</h1>
<table>
  <thead>
    <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Status</th>
        <th>Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr class="read">
        <td>Sophie's World</td>
        <td>Jostein Gardner</td>
        <td>Philosophy</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></td>
      </tr>
      <tr class="to-read">
        <td>Dune</td>
        <td>Frank Herbert</td>
        <td>Science-fiction</td>
        <td><span class="status">To Read</span></td>
        <td><span class="rate three"><span></span><span></span><span></span></span></td>
      </tr>
      <tr class="read">
        <td>The Wind in the Willows</td>
        <td>Kenneth Grahame</td>
        <td>Folktales</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>
      </tr>
      <tr class="in-progress">
        <td>Salems Lot</td>
        <td>Stephen King</td>
        <td>Horror</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate three"><span></span><span></span><span></span></span></td>
      </tr>
      </tbody>
</table>
</body>

</html>

/* file: styles.css */
h1 {
  text-align:center;
}

thead{
  background-color: #C2F5F2;
  border: 1px solid black;
}

tr[class="read"] {
  border: 1px solid black;
  background-image: linear-gradient(to right, yellow)
}

tr[class="to-read"] {
  background-image: linear-gradient(to right, #E292DB);
}

tr[class="in-progress"] {
  background-image: linear-gradient(to right, #EFC8A3);
}

span{
  display: inline-block;
}

tr[class="to-read"] span[class="status"]{
  border: 1px solid black;
  background-image: linear-gradient(to right, orange, yellow);
}

tr[class="read"] span[class="status"] {
  border: 1px solid black;
  background-image: linear-gradient(to right, #a9ff68, #ff8989);
}

tr[class="in-progress"] span[class="status"] {
  border: 1px  solid black;
  background-image: linear-gradient(to right, #c5f9d7, #f7d486, #f27a7d);
}

 span[class="status"] span[class^="rate"] {
    height: 80%;
    width: 80%;
    padding: 5px;
    }

span[class*="rate"] span {
  border-radius: 10px;
  margin: 10px;
  border: 1px solid black;
  height: 10px;
  width: 20%;
  background-color: whitesmoke;
}

span[class*="one"] span:first-of-type {
    background-image: linear-gradient(to left, red, orange);
}

span[class*="two"] span :nth-of-type(-n+2) {
   background-image: linear-gradient(to left, red, orange);
}

span[class*="three"] span {
  background-image: linear-gradient(to left, red, orange);
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-book-inventory-app/66a207974c806a19d6607073.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

are you sure this is targeting only elements that have class one? could this may be targeting elements with class "someone"?