Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

I’m having issues on the attribute selectors on test 46-51

Your code so far

<!-- <!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 class="table">
    <thead>
    <tr>
      <th class="title">Title</th>
      <th class="author">Author</th>
      <th class="category">Category</th>
      <th class="status">Status</th>
      <th class="rate1">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 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 one"><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>
      <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>
      <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 two"><span></span><span></span><span></span></span></td>       
      </tr>        
    </tbody>
  </table>
  </body>

</html>  -->


/* .table {
      width: 100%;
      border: none;
      border-collapse: collapse;
    }
    .title {
      width: 35%;
    }
    .author, .category, .status, .rate1 {
      width: 16.25%;
    }
    thead {
      background-image: linear-gradient(to top, rgb(115,211,249), rgb(182,232,252));
    }
    tr {
      height: 40px;
    } 
    tr[class="read"] {
      background-image: linear-gradient(to top, rgb(151,255,151), rgb(205,255,205));
    }
    tr[class="to-read"] {
      background-image: linear-gradient(to top, rgb(212,227,212), rgb(241,246,241));
    }
    tr[class="in-progress"] {
      background-image: linear-gradient(to top, rgb(255,221,153), rgb(255,238,203));
    }
    span {
    display: inline-block;
    }
    tr[class="to-read"] span[class="status"] {
    border: 1px solid rgb(230,19,0);
    background-image: linear-gradient(to top, rgb(255,23,2), rgb(255,126,114));
    margin: 5px;
    border-radius: 10px;
    text-align: center;    
    }
    tr[class="read"] span[class="status"] {
    border: 1px solid rgb(29,201,29);
    background-image: linear-gradient(to top, rgb(37,224,37), rgb(138,232,138));
    margin: 5px;
    border-radius: 10px;
    text-align: center;
    }
    tr[class="in-progress"] span[class="status"] {
    border: 1px solid rgb(194,133,10);
    background-image: linear-gradient(to top, rgb(242,166,14), rgb(248,207,124));
    margin: 5px;
    border-radius: 10px;
    text-align: center;    
    }
    span[class="status"], span[class^="rate"] {
    height: 80%;
    width: 80%;
    padding: 5px;
    }
    span[class^="rate"] > span {
    border: 1px solid gray;
    border-radius: 10px;
    margin: 2px;
    height: 10px;
    width: 20%;
    background-color: whitesmoke;
    }
    span[class*="one"]  span:first-child {
  background-image: linear-gradient(#f1c40f, #f39c12);
}
    span[class*="two"] span:nth-child(-n+2) {
  background-image: linear-gradient(#f1c40f, #f39c12);
}
    span[class*="three"] :nth-child(-n+3) {
  background-image: linear-gradient(#f1c40f, #f39c12);
} */

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

@okekeemeka853 , Welcome to the forum!

I suggest trying a different selector, wich selects exactly what you need.
You can find selectors under that link:

3

I’ve tried most but they’re not working

4

If you use the correct selector, than only test 50 and 51 should appear.

  1. You should have an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value.

Wich means you have to write a different logic for selecting All three span elements.

5

Which is the correct selector

6

It´s against the rules to tell you the solution directly and it would not help you to learn either.

With that said, have visited that link I shared?
If yes, wich operators have you tried?

7

Thanks, I’ve passed the test.

The code requires the ``~`` selector

1 Like