Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

I need help with steps 47, 49, 50 and 51 I would also appreciate that you use symbols to buttress your response instead of just words. For instance, replace selector * with selector ~. Thanks

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>Things Fall Apart</td>
      <td>Chinua Achebe</td>
      <td>Novel</td>
      <td>       <span class="status">Read</span>
      </td>
      <td><span class="rate three">
        <span></span>
        <span></span>
        <span></span></span></td>
    </tr>

   <tr class="to-read">
     <td>Why Revival Tarries</td>
     <td>Leonard Ravenhill</td>
     <td>Novel</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>Focus</td>
     <td>Tito Ola</td>
     <td>Poem</td>
     <td>
       <span class="status">In Progress</span>
     </td>
     <td>
       <span class="rate">
        <span></span>
        <span></span>
        <span></span></span>
     </td>
   </tr>
   
  </tbody>
</table>
</body>

</html>

/* file: styles.css */
tr[class="read"] {background-image:linear-gradient(50deg, #c36a2b);}
tr[class="to-read"] {background-image:linear-gradient(90deg, rgb(131,225,56), rgb(0,0,221));}
tr[class="in-progress"] {background-image:linear-gradient(90deg, pink, yellow);}
span{display:inline-block;}
tr[class="to-read"] span[class="status"]{border:2px;
background-image:linear-gradient(to right, #e6f0ff, #b3d1ff);}
tr[class="read"] span[class="status"]{border:2px;
background-image:linear-gradient(to right, #afb348, #b3d1ff);}
tr[class="in-progress"] span[class="status"]{border:2px;
background-image:linear-gradient(40deg, white, grey);}
span[class="status"], span[class^="rate"] {
  height:auto;
  width: auto;
  padding: 8px;} 
span[class^="rate"] > span{border:2px dotted black;
border-radius:15px; margin:auto; height:8px;
width:8px;background-color:white;}


span[class~="one"]>  span:nth-child(1){background-image:linear-gradient(45deg,orange violet);}
span[class="one"] span:first-child{background-image:linear-gradient(45deg,orange violet);}

span[class~="two"]> span:nth-child(-n+2){background-image:linear-gradient(30deg,rgb(12,233,244) #ed4678);}
span:nth-child(-n+2){background-image:linear-gradient(30deg,rgb(12,233,244) #ed4678);}
span[class~="three"]> span:nth-child(-n+3) {
  background-image: linear-gradient(to right, #afcdef, #cc43b6);
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

please describe the issue you are having in more detail.
(so we can offer the help you need)

I’m not sure I understand the rest of your query about symbols. Can you rephrase it?

3

my codes are not passing test 47, 49, 50 and 51.

4

you already said that, what part of your code do you think match them? what is confusing on why they are failing?

it would be great if you could be specific, your css is formatted in a way that is a bit confusing to read