Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Rendering correctly visually, but failing several tests like:

  • attribute selector to target the first descendant of span elements that have the word one as a part of their class value.
    -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.
  • attribute selector to target the first two descendants of span elements that have the word two as a part of

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="in-progress">
      <td>A Sky Behind the Storm</td>
      <td>Sabaa Tahir</td>
      <td>Fantasy</td>
      <td><span class="status">In Progress</span></td>
      <td><span class="rate"><span></span><span></span><span></span></span></td>
    </tr>
    <tr class="to-read">
      <td>The Bewitching</td>
      <td>Sylvia Moreno-Garcia</td>
      <td>Gothic</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>Arise</td>
      <td>Elena Aguilar</td>
      <td>Non-Fiction</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>Children of Time</td>
      <td>Adrian Tchaikovsky</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>
    <tr class="read">
      <td>Spinning Silver</td>
      <td>Naomi Novik</td>
      <td>Fantasy</td>
      <td><span class="status">Read</span></td>
      <td><span class="rate three"><span></span><span></span><span></span></span></td>
    </tr>
    </tbody>
   
  </table>

</body>

</html>

/* file: styles.css */
tr[class=read] {
  background-image: linear-gradient(to right, #d1cdcd, #535050);

}

tr[class=to-read] {
  background-image: linear-gradient(to right,#e7bebe, #ec7373 )
}

tr[class=in-progress] {
  background-image: linear-gradient(to right, #e1ebeb,#5c9393  )
}

span {
  display: inline-block;
  text-align: center;
}

tr[class="to-read"] span[class="status"] {
  border: 2px dotted black;
  background-image: radial-gradient( #cf5353 80%, #ec7373 20%);
  border-radius: 50% / 60%;
}

tr[class="read"] span[class="status"] {
  border: 2px solid black;
  background-image: radial-gradient(#ada7a7 80%, #ebe6e6 20%);
  border-radius: 50% / 60%;
}

tr[class="in-progress"] span[class="status"] {
  border: 2px dashed black;
  background-image: radial-gradient(#629191 80%, #e1ebeb 20%);
  border-radius: 50% / 60%;
  
}

span[class="status"], span[class^="rate"] {
  height: 2em;
  width: 5em;
  padding: 0.075em;
  line-height: 2em;
}

span[class^="rate"] > span {
  border: 1px solid white; 
  border-radius: 50%;
  height: 1em;
  width: 1em;
  margin: 1px;
  background-color: white;
  vertical-align: middle;
}

span[class*="one"] span:nth-child(1) {
  background-image: linear-gradient(to bottom, cyan, blue);
}

span[class*="two"] span:nth-child(-n+2) {
  background-image: linear-gradient(to bottom, cyan, blue);
}


span[class*="three"] span {
  background-image: linear-gradient(to bottom, cyan, blue);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2 
[class*="foo"]:nth-child(2) {
  /* styles */
}

Here’s an example of how to combine an attribute selector with a pseudo class.

3

Thank you so much. While this wasn’t the solution, it did drive me to look for the solution that did work. The key was using the attribute selector for values separated by whitespace, and not the *=. I appreciate your help.

4

I’m glad you figured it out. I really should have sent you this link to a valuable MDN resource on attribute selectors:

5

span[class~=“one”] :first-child 46. pass