Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

I’m having trouble passing tests 48 and 49. I’ve tried multiple methods of selecting the first two child elements of spans with the class two. Class one and class three are working fine. I don’t know what the tests are looking for.

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>
      <th>Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Status</th>
      <th>Rate</th>
    </thead>
    <tbody>
      <tr class="read">
        <td>Dune</td>
        <td>Frank Herbert</td>
        <td>Science Fiction</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>Annals of the Former World</td>
        <td>John McPhee</td>
        <td>Non-fiction</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 Control of Nature</td>
        <td>John McPhee</td>
        <td>Non-fiction</td>
        <td><span class="status">To Read</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>
      </tr>
      <tr class="in-progress">
        <td>All the King's Men</td>
        <td>Robert Penn Warren</td>
        <td>Fiction</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 */
* {
  font-family: Verdana, sans-serif;
}

h1 {
  text-align: center;
}

span {
  display: inline-block;
}
tr[class="to-read"] span[class="status"] {
  border: 2px black;
  background-image: linear-gradient(green, chartreuse);
}

tr[class="read"] span[class="status"] {
  border: 2px black;
  background-image: linear-gradient(darkred, red);
}

tr[class="in-progress"] span[class="status"] {
  border: 2px black;
  background-image: linear-gradient(purple, pink);
}

span[class="status"], span[class^="rate"] {
  height: 1.2em;
  width: 100px;
  padding: 2px;
}

span[class^="rate"] > span {
  border: 2px solid black;
  border-radius: 5px;
  margin: 5px;
  height: 7px;
  width: 7px;
  background-color: white;
}

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

span[class~="two"] span:not(span:last-child) {
  background-image: linear-gradient(gold, yellow);
}

span[class~="three"] span {
  background-image: linear-gradient(gold, yellow);
}

tr[class="read"] {
  background-image: linear-gradient(grey, lightgrey);
}

tr[class="to-read"] {
  background-image: linear-gradient(grey, lightgrey);
}

tr[class="in-progress"] {
  background-image: linear-gradient(grey, lightgrey);
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

I solved it. :nth-child() did the trick.

3

That’s an interesting way to select those spans…I wouldn’t have thought of that. But the tests probably aren’t looking for that pattern, which is why they aren’t passing.

Can you think of another pseudo class you can use like :first-child and :last-child to get at those spans?