Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

I have problems with the last steps of this project.
i have tried multiple answers but no matter what I try the test is failed, even if is working in the preview.
46. You should have an attribute selector to target the first descendant of span elements that have the word one as a part of their class value.

Your code so far

<!-- <!DOCTYPE html>
<html lang="en">
  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Book Inventory App</title>

  <link href="styles.css" rel="stylesheet">

</head>

<body>
  <main>
    <h1>Book Inventory</h1>
    <table>
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Status</th>
        <th>Rate</th>
      </tr>
      <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></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
      <tr class="to-read">
        <td>The Plague</td>
        <td>Albert Camus</td>
        <td>Philosofical 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 two">
            <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 one">
            <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 three">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
    </table>	
  </main>

</body>

</html>-->


/*
tr[class='read'] {
  background-image: linear-gradient(45deg,limegreen, green);
}
tr[class="to-read"] {
    background-image: linear-gradient(45deg,limegreen, yellow);
}
tr[class="in-progress"] {
  background-image: linear-gradient(45deg,limegreen, blue);
}
span {
  display: inline-block;
}
tr[class="to-read"] span[class="status"] {
  border: 2px solid blue;
  background-image: linear-gradient(45deg, lightblue, blue);
  border-radius: 10px;
}
tr[class="read"] span[class="status"] {
  border: 2px solid blue;
  background-image: linear-gradient(45deg, lightblue, purple);
  border-radius: 10px;
}tr[class="in-progress"] span[class="status"] {
  border: 2px solid blue;
  background-image: linear-gradient(45deg, white, yellow);
  border-radius: 10px;
}
span[class="status"], span[class^="rate"] {
  height: 40px;
  width: 60px;
  padding: 2px 6px;
  text-align: center;
}
span[class^="rate"] > span {
  border: 2px solid grey;
  border-radius: 10px;
  margin: 2px;
  height: 10px;
  width: 10px;
  background-color: white;
}

span[class*="one"] > *:nth-child(1) {
  background-image: linear-gradient(45deg, orange, yellow);
}
span[class*="two"] *:nth-child(1) {
  background-image: linear-gradient(45deg, orange, yellow);
}
span[class*="two"] *:nth-child(2) {
  background-image: linear-gradient(45deg, orange, yellow);
}
span[class*="three"] > span {
  background-image: linear-gradient(45deg, orange, yellow);
}


*/

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

You should really use your own words to say what’s going on

But, please do not use the * selector, the tests do not expect it

Also, the *= would accept also a class like “someone” but you should apply the styling only if the class is “one”

3

hi, thanks for your fast response.
I I have tried multiple ways and I cannot get the test to pass.
I have tried $= as is the last class, |= and span instead of * selector

4

none of those will match the specific word (surrounded by spaces), you may want to review, or google it

5

Thanks, solved it. The hint is “specific word”.