Tell us what’s happening:
i just can pass from 19 onwards,
my css selector are like this
tr[class=“read”] {. . . }
tr[class=“to-read”] {. . . }
tr[class=“in-progress”] {. . . }
tr[class=“read”] span[class=“status”] {. . .}
tr[class=“to-read”] span[class=“status”] {. . .}
tr[class=“in-progress”] span[class=“status”] {. . .}
span[class=“status”], span[class^=“rate”] {. . .}
span[class^=“rate”] > span {. . .}
span[class*=“one”] > :nth-child(1) {. . .}
span[class*=“two”] > :nth-child(-n+2) {. . .}
span[class*=“three”] > :nth-child(-n+3) {. . .}
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Book Inventory</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>Book Inventory</h1>
<div class="table-container"></div>
<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 Cheshire Cat</td>
<td>Lewis Carroll</td>
<td>Fiction</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>Alice's Adventures</td>
<td>Lewis Carroll</td>
<td>Fantasy</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>Adventures in Wonderland</td>
<td>Various</td>
<td>Anthology</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>Through the Looking Glass</td>
<td>Lewis Carroll</td>
<td>Classic</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>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>
</main>
</body>
</html>
/* file: styles.css */
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.table-container {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100vw;
}
thead {
background-image: linear-gradient(to right, #667eea 0%, #764ba2 100%);
}
th {
padding: 0.4em;
}
td {
text-align: center;
padding: 0.3em;
}
tr[class="read"] {
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}
tr[class="to-read"] {
background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
tr[class="in-progress"] {
background-image: linear-gradient(to right, #00c6ff, #0072ff);
}
tr[class="read"] span[class="status"] {
border: 0.1em solid hsl(120, 75%, 45%);
background-image: linear-gradient(hsl(120, 75%,75%), hsl(120, 75%, 50%));
margin: 5px;
border-radius: 10px;
text-align: center;
}
tr[class="to-read"] span[class="status"] {
border: 0.1em solid hsl(5, 100%, 45%);
background-image: linear-gradient(to right, hsl(280, 100%, 70%), hsl(250, 100%, 70%));
margin: 5px;
border-radius: 10px;
text-align: center;
}
tr[class="in-progress"] span[class="status"] {
border: 0.1em solid hsl(40, 90%, 40%);
background-image: linear-gradient(hsl(40, 90%, 75%), hsl(40, 90%, 50%));
margin: 5px;
border-radius: 10px;
text-align: center;
}
span {
display: inline-block;
}
span[class="status"] {
border-radius: 20%/60%;
}
span[class="status"], span[class^="rate"] {
height: 80%;
width: 80%;
padding: 5px;
}
span[class^="rate"] {
height: 20px;
width: 20px;
padding: 4px;
}
span[class^="rate"] > span {
border: 1px solid gray;
border-radius: 10px;
margin: 2px;
height: 10px;
width: 20%;
background-color: whitesmoke;
}
span[class*="one"] > :nth-child(1) {
background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
}
span[class*="two"] > :nth-child(-n+2){
background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
}
span[class*="three"] > :nth-child(-n+3){
background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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