Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Hi. I’m a Jr. Web Developer just trying to get certs under my belt to pad my resume a little and tis Certification Exam is kicking my a$$! It errors at Step #35 and I know I have it coded right because it is affecting the SPAN element with the class name of ‘status’ and the span with the class starting with ‘rate’ in the Preview.

What am I missing because I hardly deal with attribute selectors?

Thanks in advance!

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>Go With The Flow</td>
        <td>I.P. Freely</td>
        <td>Fiction</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>Touch My Toes</td>
        <td>Ben Dover</td>
        <td>Non-Fiction</td>
        <td><span class="status">To Read</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></span></td>
      </tr>
      <tr class="in-progress">
        <td>A Sweet Caress</td>
        <td>Amanda Hugandkiss</td>
        <td>Non-Fiction</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate three"><span></span><span></span><span></span></span></span></td>
      </tr>
    </tbord>

  </table>
</body>

</html>

/* file: styles.css */
tr[class="read"] {
  background-image: linear-gradient(to bottom, #00f000, #ffffff);
}

tr[class="to-read"] {
  background-image: linear-gradient(to bottom, #f00000, #ffffff);
}

tr[class="in-progress"] {
  background-image: linear-gradient(to bottom, #0000f0, #ffffff);
}

span {
  display: inline-block;
}

span[class="status"] {
  width: 120px;
  height: 100%;
  padding: 5px;
  text-align: center;
}

span[class~="rate"] {
  width: 120px;
  height: 100%;
  padding: 5px;
  text-align: center;
}

tr[class="read"] span[class="status"] {
  border: 1px solid #888888;
  background-image: none;
}

tr[class="to-read"] span[class="status"] {
  border: 1px solid #000000;
  background-image: none;
}

tr[class="in-progress"] span[class="status"] {
  border: 1px solid #ffffff;
  background-image: none;
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

Well, welcome to the Forum @michael.scott.rainey !

Since you are experienced already, you may understand that test can be very strict on online learning platforms.
This case is no different, you have to do exactly what the task says:

35. You should have an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate.

I often forget too to read loud and slowly when I facing such problems.
Please practice that techniqe here.

3

Try combining these selectors into one. Here’s an MDN reference on attribute selectors if you need it:

Attribute selectors - CSS | MDN

4

Hi @michael.scott.rainey ,

Welcome to the forum!

Here is the #35. You should have an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate .

Create an attribute selector that targets span with classes “status” or “rate”.
Refer this for how to combine multiple attribute selectors.

Hope it helps!