Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Dear friends,

I hope this message finds you well.

I’m having trouble passing exercises 46 through 51, (Build a Book Inventory App) despite my code running fine. Could anyone lend a hand? For example, exercise 46 states: “You should have an attribute selector to target the first descendant of span elements that have the word ‘one’ as part of their class value.”

Thank you!

Your code so far

<!-- file: index.html -->


/* file: styles.css */

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

<!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 Three Musketeers</td>
        <td>Alexandre Dumas</td>
        <td>Historical Novel</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate three">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
          </span></td>
      </tr>
      <tr class="to-read">
        <td>The Plague</td>
        <td>Albert Camus</td>
        <td>Philosophical 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="read">
        <td>The Metamorphosis</td>
        <td>Franz Kafka</td>
        <td>Novella</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate one">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
          </span></td>
      </tr>
      <tr class="read">
        <td>Dead Souls</td>
        <td>Nikolai Gogol</td>
        <td>Picaresque</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate two">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
          </span></td>
      </tr>
      <tr class="in-progress">
        <td>Lord of the Flies</td>
        <td>William Golding</td>
        <td>Allegorical Novel</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate">
          <span></span>
          <span></span>
          <span></span>
          </span></td>
      </tr>
      <tr class="read">
        <td>Do Androids Dream of Electric Sheep?</td>
        <td>Philip K. Dick</td>
        <td>Science Fiction</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>

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

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

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

span{
  display: inline-block;
}

tr[class="read"] span[class="status"]{
  background-image: linear-gradient(0deg,rgba(212, 193, 193, 1) 0%, rgba(230, 18, 18, 1) 100%);
  border: 1px solid #d4c1c1;
  border-radius: 5px;
}

tr[class="to-read"] span[class="status"]{
  background-image: linear-gradient(0deg,rgba(34, 195, 96, 1) 0%, rgba(78, 193, 86, 1) 23%, rgba(97, 192, 81, 1) 100%, rgba(253, 187, 45, 1) 100%);
  border: 1px solid #22c360;
  border-radius: 5px;
}

tr[class="in-progress"] span[class="status"]{
  background-image: linear-gradient(0deg,rgba(209, 125, 65, 1) 100%, rgba(235, 235, 235, 1) 100%);
  border: 1px solid #d17d41;
  border-radius: 5px;
}

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

span[class^="rate"] > span{
  border: 1px solid gray;
    border-radius: 10px;
    margin: 2px;
    height: 10px;
    width: 10px;
    background-color: whitesmoke;
}

span[class~="one"] span {
    background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
} 

span[class~="two"] span{
  background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
    } 
span[class~="three"] span{  
    background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));  
    }
2

Hi,
For the steps you’re failing, you need to use the :first-child and :nth-child() pseudo classes.
For example, step 46 wants you to target the first descendant of the span elements that have the word “one” as part of their class value. To target the first descendant, you would need to use the :first-child pseudo-class.
Similarly to target the first two descendants as stated in step 48, you would need to use the nth-child() pseudo-class.
I hope this helps!

3

how to do the step 48?

4

show what you tried for that

5

You can share your updated code and we’ll help you out from there.