I don’t understand why this won’t work because it works fine with same attribute selectors in previous steps:
span[class~="rate three"] > :nth-child(1),
span[class~="rate three"] > :nth-child(2),
span[class~="rate three"] > :nth-child(3) {
background-image: linear-gradient(to right, #ffcc00, #ffdb4d);
}
Test report says this…
Failed: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.
Failed: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’ve searched other threads on this topic and tried to follow guidance and I’ve rewritten it as many different ways that I can think of. I don’t understand. Any assistance would be greatly appreciated. Thank you in advance
Woops I was testing in that snippet…here is what I have:
span[class~="three"] > :nth-child(1),
span[class~="three"] > :nth-child(2),
span[class~="three"] > :nth-child(3) {
background-image: linear-gradient(to right, #ffcc00, #ffdb4d);
}
Please share your full code and a link to the project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>The Hitchhiker's Guide to the Galaxy</td>
<td>Douglas Adams</td>
<td>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="to-read">
<td>Dune</td>
<td>Frank Herbert</td>
<td>Science Fiction</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>Sapiens: A Brief History of Humankind</td>
<td>Yuval Noah Harari</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>Pride and Prejudice</td>
<td>Jane Austen</td>
<td>Classic</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>1984</td>
<td>George Orwell</td>
<td>Dystopian</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>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr[class="read"] {
background-image: linear-gradient(to right, #e6ffe6, #ccffcc);
}
tr[class="to-read"] {
background-image: linear-gradient(to right, #ffe6e6, #ffcccc);
}
tr[class="in-progress"] {
background-image: linear-gradient(to right, #e6e6ff, #ccccff);
}
span {
display: inline-block;
}
tr[class="to-read"] span[class="status"] {
border: 1px solid #ff6666;
background-image: linear-gradient(to right, #ff9999, #ffb3b3);
}
tr[class="read"] span[class="status"] {
border: 1px solid #33cc33;
background-image: linear-gradient(to right, #66ff66, #99ff99);
}
tr[class="in-progress"] span[class="status"] {
border: 1px solid #3366ff;
background-image: linear-gradient(to right, #6699ff, #99b3ff);
}
span[class="status"],
span[class^="rate"] {
height: 20px;
width: 80px;
padding: 5px;
}
span[class^="rate"] > span {
border: 1px solid #ccc;
border-radius: 50%;
margin: 0 2px;
height: 15px;
width: 15px;
background-color: #eee;
}
span[class~="one"] > span:nth-child(1) {
background-image: linear-gradient(to right, #ffcc00, #ffdb4d);
}
span[class~="two"] > span:nth-child(1),
span[class~="two"] > span:nth-child(2) {
background-image: linear-gradient(to right, #ffcc00, #ffdb4d);
}
span[class~="three"] > :nth-child(1),
span[class~="three"] > :nth-child(2),
span[class~="three"] > :nth-child(3) {
background-image: linear-gradient(to right, #ffcc00, #ffdb4d);
}
https://www.freecodecamp.org/learn/full-stack-developer/lab-book-inventory-app/build-a-book-inventory-app
ILM
May 28, 2025, 10:32am
5
please do not use a selector list to select the three span elements, use a simpler selector to select them all at once
Do you mean like this:
span[class~="three"] > :nth-child(-n+3) {
background-image: linear-gradient(to right, #ffcc00, #ffdb4d);
}
it still doesn’t pass the test
Failed: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.
Failed: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.
ILM
May 28, 2025, 3:59pm
7
go simpler with the attribute
you are selecting all three elements, you don’t need to use special classes to write that
Do you mean the tilde? I’ve tried ~= and *= and = but still won’t pass
i understand what you are saying “simpler” and finally got it to pass. I appreciate your time and assistance tremendously!