Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Despite the fact that my attribute selectors (seem to) correctly select and style the relevant rating spans, I can’t pass tests 48-51. What am I missing?

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>
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Status</th>
        <th>Rate</th>
      </tr>
      <tr class="read">
        <td>Book1</td>
        <td>Author</td>
        <td>General Interest</td>
        <td><span class="status read">Read</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></td>
      </tr>
            <tr class="read">
        <td>Book2</td>
        <td>Author</td>
        <td>General Interest</td>
        <td><span class="status read">Read</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>
      </tr>
            <tr class="to-read">
        <td>Book3</td>
        <td>Book1</td>
        <td>General Interest</td>
        <td><span class="status to-read">To Read</span></td>
        <td><span class="rate"><span></span><span></span><span></span></span></td>
      </tr>
            <tr class="in-progress">
        <td>Book4</td>
        <td>Author</td>
        <td>General Interest</td>
        <td><span class="status in-progress">In Progress</span></td>
        <td><span class="rate three"><span></span><span></span><span></span></span></td>
      </tr>
    </table>
  </body>
</html>




/* file: styles.css */
.read {
    background: linear-gradient(45deg, black, white)
}

.to-read {
    background: linear-gradient(45deg, yellow, red)
}

.in-progress {
    background: linear-gradient(45deg, green, brown)
}

span {
    display: inline-block;
}

tr[class="to-read"] {
    border: 1px solid grey;
    background: blue;
            background: linear-gradient(45deg, black, white)
}

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

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

tr[class="read"] {
    border: 1px solid grey;
    background: pink;
        background: linear-gradient(45deg, black, white)
}

tr[class="in-progress"] {
    border: 1px solid grey;
    background: linear-gradient(45deg, green, brown)
}

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

span[class="status"], span[class^="rate"] {
    height: 30px;
    width: 200px;
    padding: 0 0 0 0;
    display: flex;
    flex-direction: row-reverse;
}

span[class^="rate"]>span {
    border: 1px solid grey;
    background-color: yellow;
    border-radius: 1%;
    margin: 0 0 0 0;
    height: 90%;
    width: 33%;
    padding: 0 0 0 0;
}

span[class~="one"]>span:first-of-type {
    background-image: linear-gradient(0, brown, black)
}

span[class~="two"] span:first-of-type, span[class~="two"] span:nth-of-type(2) {
    background-image: linear-gradient(0, black, black)
}

span[class~="three"] span:first-of-type, span[class~="three"] span:nth-of-type(2), span[class~="three"] span:nth-of-type(3) {
    background-image: linear-gradient(0, black, black)
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:144.0) Gecko/20100101 Firefox/144.0

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

I guess the tests do not expect the user to use nth-of-type for the tests.

There is another way to get the descendants of the span elements with the given class name.

Try using the nth-child selector for the class~=”two” selector, but to the span descendants of that selector.

Also,…yeah this is a bit screwy.

Whenever I try to use nth-child or nth-of-type for the class~=”three” one, the tests DO NOT accept them, but when I simply leave the descendant selector as simply span, the test accepts it.

1 Like
3

we can’t predict every way that the challenge will be solved, if you have a valid way that the tests do not pass for you can open an issue on github

2 Likes
4

Ok, thanks for the pointers. I wasn’t necessarily sure that my approach was valid just because it worked, if that makes sense.