Build a Book Inventory App - Build a Book Inventory App

Curriculum Help
1

Tell us what’s happening:

Good day,

I cannot figure out how to solve 48. I used the selector for specific words in classes and the right child selector. I reviewed all the relevant material and looked through every post I could find, but still cannot see what is wrong with this code:

span[class~=“one”]:first-child {}

I also tried first-of-type and nth-child(1). None seem to work.

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>The Three Muskateers</td>
    <td>Alexandre Dumas</td>
    <td>Historical Novel</td>
    <td><span class="status">Read</td>
    <td><span class="rate three"><span></span><span></span><span></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</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></span><span></span><span></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></span><span></span><span></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>

/* file: styles.css */
tr[class="read"] {
  background-image: linear-gradient(green, white);
}

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

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

span {
  display: inline-block;
}

tr[class="to-read"] span[class="status"] {
  border: 1px black solid;
  background-image: linear-gradient(gray, white);
}

tr[class="read"] span[class="status"] {
  border: 1px black solid;
  background-image: linear-gradient(gray, white);
}

tr[class="in-progress"] span[class="status"] {
  border: 1px black solid;
  background-image: linear-gradient(gray, white);
}

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

span[class^="rate"] > span {
  border: 1px black solid;
  border-radius: 50px;
  margin: 5px;
  height: 20px;
  width: 30px;
  background-color: yellow;
}

span[class~=“one”]:first-child {
  background-image: linear-gradient(blue, purple);
}

span[class~="two"]:nth-child(1), span[class~="two"]:nth-child(2) {
  background-image: linear-gradient(blue, purple);
}


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

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-book-inventory-app/66a207974c806a19d6607073.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

try removing the smart curly quotes and replacing with normal straight quotes

3

I got it. The curly quotes did not fix it. It only accepted:

span[class~=“one”] span:first-child {}