Step 52. Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Step 52. My code will not pass.

I’m unsure why my code will not pass as I thought it would be the same process as 50.
Though the code will not pass it works in the preview.
Any help would be appreciated and thank you.

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 class="title">Title</th>
       <th class="author">Author</th>
       <th class="category">Category</th>
       <th class="status">Status</th>
       <th class="rate1">Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr class="read">
        <td>The Song of the Lioness</td>
        <td>Tamora Pierce</td>
        <td>Fantasy</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate three"><span></span><span></span><span></span></span></td>
      </tr>
      <tr class="read">
        <td>Pride and Prejudice</td>
        <td>Jane Austen</td>
        <td>Romance</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 Spellshop</td>
        <td>Sarah Beth Durst</td>
        <td>Cozy Fantasy</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>Aicha</td>
        <td>Soraya Bouazzaoui</td>
        <td>Mythology</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 */
 table {
   font-family: arial;
   text-align: center;
 }

 h1 {
   font-family: brushscriptMT;
   font-size: 60px;
   display: flex;
   justify-content: center;
 }
 

 
 tr[class="read"]{
   background-image: linear-gradient(45deg, rgb(209, 244, 255), lightgrey);
 }

 tr[class="to-read"]{
   background-image: linear-gradient(45deg, rgb(209, 244, 255), lightgrey);
 }

 tr[class="in-progress"] {
   background-image: linear-gradient(45deg, rgb(209, 244, 255), lightgrey);
 }

 span {
   display: inline-block;
 }

 tr[class="read"] span[class="status"]{
   border: 2px solid linen;
   background-image: linear-gradient(360deg, cornflowerblue, rgb(209, 244, 255));
   text-align: center;
 }

 tr[class="to-read"] span[class="status"]{
   border: 5px double white;
   background-image: radial-gradient(circle, gold, lightsalmon);
   text-align: center;
 }

 tr[class="in-progress"] span[class="status"] {
   border: 2px solid white;
   background-image: radial-gradient(circle, gold, rgb(250, 246, 222));
   text-align: center;
 }

 span[class="status"], span[class^="rate"] {
   height: 20px;
   width: 20vw;
   padding: 4px;
 }

span[class^="rate"] > span{
  border: 1px solid gold;
  border-radius: 90px;
  margin: 8px;
  height: 10px;
  width: 10px;
  background-color: rgb(209, 244, 255);
}

span[class~="one"] >:first-child {
   background-image: linear-gradient(90deg, gold, linen);
  }

span[class~="two"] >:nth-child(-n+2) {
   background-image: linear-gradient(90deg, gold, linen);
}

span[class~="three"] >:nth-child(-n+3) {
   background-image: linear-gradient(90deg, gold, linen);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

You should remove the >:nth-child(-n+3) part and just let the selector target all descendant span elements instead of specific positioned children.

3

Thank you for your reply.

This unfortunately didn’t work either.

4

it worked with mine so if you just type: span[class~=“three”] span {}, then it should probably work