Build a Book Inventory App - Build a Book Inventory App

Curriculum Help
1

Tell us what’s happening:

Good Sir/Ma
Hope this message find you well
I am stack here:
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.
Failed:49. You should use an attribute selector to target the first descendant of span elements that have the word one as a part of their class value and set its background-image property to use a linear-gradient.
Can you please help me out

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/149.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

Hey @atatatolia002,

Can you please provide your code?

3

Sorry for that

I will do that

4

Tell us what’s happening:

Good Sir/Ma
Hope this message find you well
I am stack here:
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.
Failed:49. You should use an attribute selector to target the first descendant of span elements that have the word one as a part of their class value and set its background-image property to use a linear-gradient.
Can you please help me out

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>Developer</td>
        <td>Atata Tolia</td>
        <td>Machine</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate one two three"><span></span><span></span><span></span></span></td>
      </tr>
      <tr class="to-read">
        <td>Developer</td>
        <td>Atata Tolia</td>
        <td>Machine</td>
        <td><span class="status">To Read</span></td>
        <td><span class="rate "><span></span><span></span><span></span></span></td>
      </tr>
      <tr class="to-read">
        <td>Developer</td>
        <td>Atata Tolia</td>
        <td>Machine</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>Developer</td>
        <td>Atata Tolia</td>
        <td>Machine</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>Developer</td>
        <td>Atata Tolia</td>
        <td>Machine</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate one two three"><span></span><span></span><span></span></span></td>
      </tr>
      <tr class="in-progress">
        <td>Developer</td>
        <td>Atata Tolia</td>
        <td>Machine</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 */
body {
  background-color: #fabbfab0;
}

h1 {
  text-align: center;
  color: navy;
}
table thead tr th {
  color: navy;
  padding: 0 20px 0 20px;
}

table {
  align-items: center;
}

tr[class="read"] {
  background-image: linear-gradient(36deg, #0afa0a, #b0e000, #0afada, #0afa);
  color: black;
}
tr[class="to-read"] {
  background-image: linear-gradient(36deg, #fa0a, #e000, #fada, #0abbfa);
  color: black;
}
tr[class="in-progress"] {
  background-image: linear-gradient(36deg, #fa0f0a, #ffe000, #fffada, #fabbfa);
  color: black;
}
span {
  display: inline-block;
}

tr[class="to-read"] span[class="status"] {
  background-image: linear-gradient( to right, #00ff00);
  border: 5px solid #00ff00;
  border-radius: 15px;
}

tr[class="read"] span[class="status"] {
  background-image: linear-gradient( to right, #0000ff);
  border: 5px solid #0000ff;
  border-radius: 15px;
}

tr[class="in-progress"] span[class="status"] {
  background-image: linear-gradient( to right, #ff0000);
  border: 5px solid #ff0000;
  border-radius: 15px;
}
span[class="status"], span[class^="rate"] {
  height: 20px;
  width: 100px;
  padding: 2px;
}




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

span[class*="one"] span:nth-child(1) {
  background-image: linear-gradient(blue, navy, #0a0aff);
}

span[class*="one"] span:nth-child(2) {
  background-image: linear-gradient(blue, navy, #0a0aff);
}

span[class*="one"] span:nth-child(3) {
  background-image: linear-gradient(blue, navy, #0a0aff);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.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

5

Hey @atatatolia002,

*= matches if value appears anywhere inside the attribute, just like a substring.

So, *= would also match oneClass test

<div class="oneClass test">
<!-- content -->
</div>

But, test is expecting to match descendant of span elements that have the word one as a part of their class value. So your attribute selector should only match one from the class list, not oneClass if it’s there.

Check out What Is the Attribute Selector, and How Can It Be Used to Target Links with the href and title Attributes? in case if you are confused about the selector.

6

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.