18. .rate elements placed inside .read rows should have an additional class after the rate class with the value of either one, two, or three, depending on the personal rate.
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
<!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>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
</thead>
<tbody>
<tr class="read">
<td>Steven Universe: End of an Era</td>
<td>Chris McDonnell</td>
<td>Fiction/Art</td>
<td>
<span class="status">Read</span>
</td>
<td>
<span class="rate">
<span class="one"></span>
<span class="one"></span>
<span class="one"></span>
</span>
</td>
</tr>
<tr class="to-read">
<td>Adventure Time: The Art of Ooo</td>
<td>Chris McDonnell</td>
<td>Fiction/Art</td>
<td>
<span class="status">To Read</span>
</td>
<td>
<span class="rate">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</span>
</td>
</tr>
<tr class="in-progress">
<td>Art of Invader Zim</td>
<td>Chris McDonnell</td>
<td>Fiction/Art</td>
<td>
<span class="status">In Progress</span>
</td>
<td>
<span class="rate">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
tr\[class="read"\]{
background-image: linear-gradient(to left,#052659, #5483B3)
}
tr\[class="to-read"\]{
background-image: linear-gradient(to left, #052659, #5483B3)
}
tr\[class="in-progress"\]{
background-image: linear-gradient(to left, #052659, #5483B3)
}
span{
display: inline-block;
}
tr\[class="to-read"\] span\[class="status"\]{
border: 20px;
background-image: linear-gradient(to right, #7DA0C4, #C1E8FF)
}
tr\[class="read"\] span\[class="status"\]{
border: 20px;
background-image: linear-gradient(to right, #7DA0C4, #C1E8FF)
}
tr\[class="in-progress"\] span\[class="status"\]{
border: 20px;
background-image: linear-gradient(to right, #7DA0C4, #C1E8FF)
}
span\[class="status"\], span\[class^="rate"\]{
height: 4em;
width: 8em;
padding: 5px;
}
span\[class^="rate"\] > span {
border: 1px solid #021024 ;
border-radius: 1em;
margin: 3px;
height:2em;
width: 4em;
background-color: #021024;
}
span\[class\~="one"\], span:first-child{
background-image: linear-gradient(to left,#9BA8AB, #CCD0CF)
}
span\[class\~="two"\], span:second-child(n+2){
background-image: linear-gradient(to left, #9BA8AB, #CCD0FF)
}
