Hey, could somebody please look over my code and identify why it is failing. I have tried finding out in the forum and have attempted to utilise Copilot to assist in identifying errors but this has drawn a blank.
Book Inventory
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 Hobbit</td>
<td>J.R.R. Tolkien</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>
<tr class="read">
<td>1984</td>
<td>George Orwell</td>
<td>Dystopian Social Science 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="in-progress">
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>Novel / Historical Fiction</td>
<td><span class="status">In Progress</span></td>
<td>
<span class="rate two">
<span></span>
<span></span>
<span></span>
</span>
</td>
</tr>
<tr class="to-read">
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>Gothic / Novel</td>
<td><span class="status">To Read</span></td>
<td>
<span class="rate">
<span></span>
<span></span>
<span></span>
</span>
</td>
</tr>
</tbody>
\[class="read"\] {
background-image: linear-gradient(to right, lightgreen, white);
}
\[class="to-read"\] {
background-image: linear-gradient(to right, lightblue, white);
}
\[class="in-progress"\] {
background-image: linear-gradient(to right, lightyellow, white);
}
span {
display: inline-block;
}
\[class="to-read"\] \[class="status"\] {}
\[class="to-read"\] \[class="status"\] {
border: 1px solid lightblue;
background-image: linear-gradient(to right, lightblue, white);
}
\[class="read"\] \[class="status"\] {}
\[class="read"\] \[class="status"\] {
border: 1px solid lightgreen;
background-image: linear-gradient(to right, lightgreen, white);
}
\[class="in-progress"\] \[class="status"\] {}
\[class="in-progress"\] \[class="status"\] {
border: 1px solid lightyellow;
background-image: linear-gradient(to right, lightyellow, white);
}
\[class="status"\],
\[class^="rate"\] {}
\[class="status"\],
\[class^="rate"\] {
height: 20px;
width: 80px;
padding: 4px;
}
\[class^="rate"\] > span {}
\[class^="rate"\] > span {
border: 1px solid black;
border-radius: 50%;
margin: 2px;
height: 10px;
width: 10px;
background-color: white;
}
\[class\*="one"\] span:first-child {}
\[class\*="one"\] span:first-child {
background-image: linear-gradient(to right, black, gray);
}
\[class\*="two"\] span:nth-child(-n+2) {}
\[class\*="two"\] span:nth-child(-n+2) {
background-image: linear-gradient(to right, black, gray);
}
\[class\*="three"\] span {}
\[class\*="three"\] span {
background-image: linear-gradient(to right, black, gray);
}
I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add the backticks.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Thank you, will do that in the future. These are the elements that are not being met and I have found myself in a loop trying to fix them.
19. You should have an attribute selector to target rows that have the class of read.
20. You should use an attribute selector to target rows that have the class of read and set their background-image property to a linear gradient of your choice.
21. You should have an attribute selector to target rows that have the class of to-read.
22. You should use an attribute selector to target rows that have the class of to-read and set their background-image property to a linear gradient of your choice.
23. You should have an attribute selector to target rows that have the class of in-progress.
24. You should use an attribute selector to target rows that have the class of in-progress and set their background-image property to a linear gradient of your choice.
26. You should have an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read.
27. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read and set their border property.
28. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read and set their background-image property.
29. You should have an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of read.
30. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of read and set their border property.
31. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of read and set their background-image property.
32. You should have an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of in-progress.
33. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of in-progress and set their border property.
34. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of in-progress and set their background-image property.
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.
36. You should use an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate and set their height property.
37. You should use an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate and set their width property.
38. You should use an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate and set their padding property.
39. You should have an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate.
40. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their border property.
41. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their border-radius property.
42. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their margin property.
43. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their height property.
44. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their width property.
45. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their background-color property.
46. You should have an attribute selector to target the first descendant of span elements that have the word one as a part of their class value.
47. You should use an 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.
48. You should have an attribute selector to target the first two descendants of span elements that have the word two as a part of their class value.
49. You should use an attribute selector to target the first two descendants of span elements that have the word two as a part of their class value and set their background-image property to use a linear-gradient.
50. 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.
51. You should use 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 and set their background-image property to use a linear-gradient.
I would review how to select elements by an attribute.
Thank you, I have resolved all failed areas now.
2 Likes
