Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

I have been trying to get past 46-51 without luck please help

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>The Alchemist</td>
        <td>Paulo Coelho</td>
        <td>Fiction</td>
        <td>
          <span class="status">Read</span>
        </td>
        <td>
          <span class="rate one">
            <span></span><span></span><span></span>
          </span>
        </td>
      </tr>

      <tr class="to-read">
        <td>Atomic Habits</td>
        <td>James Clear</td>
        <td>Self-help</td>
        <td>
          <span class="status">To Read</span>
        </td>
        <td>
          <span class="rate">
            <span></span><span></span><span></span>
          </span>
        </td>
      </tr>

      <tr class="in-progress">
        <td>Educated</td>
        <td>Tara Westover</td>
        <td>Memoir</td>
        <td>
          <span class="status">In Progress</span>
        </td>
        <td>
          <span class="rate two">
            <span></span><span></span><span></span>
          </span>
        </td>
      </tr><tr class="read">
  <td>Becoming</td>
  <td>Michelle Obama</td>
  <td>Biography</td>
  <td>
    <span class="status">Read</span>
  </td>
  <td>
    <span class="rate three">
      <span></span><span></span><span></span>
    </span>
  </td>
</tr>


    </tbody>
  </table>
</body>
</html>



/* file: styles.css */

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: left;
}
tr[class="read"] {
  background-image: linear-gradient(to right, #d4fc79, #96e6a1);
}

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

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

span {
  display: inline-block;
}

tr[class="read"] span[class="status"] {
  border: 2px solid green;
  background-image: linear-gradient(to right, #a8e063, #56ab2f);
}

tr[class="to-read"] span[class="status"] {
  border: 2px solid orange;
  background-image: linear-gradient(to right, #f6d365, #fda085);
}

tr[class="in-progress"] span[class="status"] {
  border: 2px solid blue;
  background-image: linear-gradient(to right, #89f7fe, #66a6ff);
}

span[class="status"],
span[class^="rate"] {
  height: 30px;
  width: 100px;
  padding: 5px;
}

span[class^="rate"] > span {
  border: 1px solid #333;
  border-radius: 50%;
  margin: 2px;
  height: 15px;
  width: 15px;
  background-color: #ccc;
}
span[class*="one"] span:first-child {
  background-image: linear-gradient(to right, #ff9a9e, #fad0c4);
}
span[class*="two"] span:first-child {
  background-image: linear-gradient(to right, #a18cd1, #fbc2eb);
}

span[class*="two"] span:nth-child(2) {
  background-image: linear-gradient(to right, #a18cd1, #fbc2eb);
}

span[class*="three"] span {
  background-image: linear-gradient(to right, #43e97b, #38f9d7);
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

Are you using the correct attribute selector?

MDN: Attribute Selectors