Build a Book Inventory App

tshepang · August 25, 2026, 7:02pm

Hello guys, I need assistance with this code below, I’m stuck on user story number 21, everything works but when I click on check the code it display this message: You should have an attribute selector to target rows that have the class of read and when I do it, it still says the same thing so I’m stuck on that. Please the code below, for both HTML and CSS any assistance would be appreciated.

HTML code

Book Inventory

<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 one">

        <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</span></td>

    <td>

      <span class="rate">

        <span></span>

        <span></span>

        <span></span>

      </span>

    </td>

  </tr>

  <tr class="in-progress">

    <td>The Metamorphosis</td>

    <td>Franz Kafka</td>

    <td>Novella</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>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>

</tbody>

CSS code

[class=“read”] {

background-image: linear-gradient(to right, #d4fc79, #96e6a1);

}

dhess · August 25, 2026, 7:20pm

Welcome to the forum @tshepang,

It doesn’t look like all of your code came through. Please click the “Help” button located on the challenge.

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

dhess · August 25, 2026, 7:22pm

Is this the correct way to create a CSS class seletor?

Happy coding

tshepang · August 25, 2026, 7:52pm

Tell us what’s happening:

Hello guys, I need assistance with this code below, I’m stuck on user story number 21, everything works but when I click on check the code it display this message: You should have an attribute selector to target rows that have the class of read and when I do it, it still says the same thing so I’m stuck on that. Please the code below, for both HTML and CSS any assistance would be appreciated.

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 Musketeers</td>
        <td>Alexandre Dumas</td>
        <td>Historical Novel</td>
        <td><span class="status">Read</span></td>
        <td>
          <span class="rate one">
            <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</span></td>
        <td>
          <span class="rate">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
      <tr class="in-progress">
        <td>The Metamorphosis</td>
        <td>Franz Kafka</td>
        <td>Novella</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>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>
    </tbody>
  </table>
</body>

</html>

/* file: styles.css */
[class="read"] {
  background-image: linear-gradient(to right, #d4fc79, #96e6a1);
}

Your browser information:

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

dhess · August 25, 2026, 7:59pm

That looks like the syntax for an attribute selector.

How do you create a simple class selector?

tshepang · August 25, 2026, 8:09pm

A simple read class selector would be .read