Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Even after adding attribute selector for “read” am still getting the error

Failed:21. You should have an attribute selector to target rows that have the class of read.

Your code so far

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

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

<body>
  <h1>Book Inventory</h1>
  <table>
    <thead>
      <tr>
        <th class="title">Title</th>
        <th class="author">Author</th>
        <th class="category">Category</th>
        <th class="status">Status</th>
        <th class="rating">Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr class="read">
        <td>The Three Musketeers</td>
        <td>Alexandre Dumas</td>
        <td>History</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>The Plague</td>
        <td>Albert Camus</td>
        <td>Philosophy</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 Metamorphosis</td>
        <td>Franz Kafka</td>
        <td>Novel</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>Dead Souls</td>
        <td>Nikolai Gogol</td>
        <td>Picture</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>
      </tr>
       <tr class="read">
        <td>Lord of the Flies</td>
        <td>William Golding</td>
        <td>Novel</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></td>
      </tr>
    </tbody>


  </table>


</body>

</html>

/* file: styles.css */
span[class="status"] {
  display: inline-block;
  height: 80px;
  width: 100px;
  padding: 0 auto;
}

span[class^="rate"] {
  display: inline-block;
  height: 80px;
  width: 100px;
  padding: 0 auto;
}

th {
  background-image: linear-gradient(rgb(71, 211, 209), rgb(21, 171, 148));
  padding: 15px;
  color: white;
}

tr {
  padding: 20px;
  font-weight: bold;
  font-family: sans-serif;
  height: 50px;
}


tr[class="read"]{
  background-image:linear-gradient(green, rgb(110, 228, 110));
}

tr[class="to-read"]{
 background-image: linear-gradient(rgb(238, 99, 238), rgb(240, 169, 240));
}

tr[class="in-progress"]{
  background-image: linear-gradient(orange, rgb(232, 190, 112));
}

span[class*="one"] > span:first-child {
  background-image: linear-gradient(135deg, #f1c40f, #f39c12);
  border-color: #f39c12;
}

span[class*="two"] > span:nth-child(-n+2) {
  background-image: linear-gradient(135deg, #f1c40f, #f39c12);
  border-color: #f39c12;
}

span[class*="three"] > span {
background-image: linear-gradient(135deg, #f1c40f, #f39c12);
border-color: #f39c12; 

}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

have you considered that this duplication could be an issue?

3

Thank you for the support.