Build a Book Inventory App - Build a Book Inventory App

christinewho2 · May 19, 2026, 6:11pm

It still says the same error.

my current css


tr[class="to-read"] {background-image: linear-gradient(red, yellow, orange);}

tr[class="in-progress"] {background-image: linear-gradient(lightblue, pink, white);}
span {display: inline-block;}

tr[class="to-read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(blue, navy, lightblue,);}

tr[class="read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(to top, green, lightgreen,grey,);}

tr[class="in-progress"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(lightblue, pink, white);}

ILM · May 19, 2026, 6:13pm

what is your new code?

dhess · May 19, 2026, 6:13pm

You have an extra comma in your linear-gradient settings.

christinewho2 · May 19, 2026, 6:14pm

I fixed that now lol send my update code at the same time lol

christinewho2 · May 19, 2026, 6:14pm

actually that’s actually my new code


tr[class="to-read"] {background-image: linear-gradient(red, yellow, orange);}

tr[class="in-progress"] {background-image: linear-gradient(lightblue, pink, white);}
span {display: inline-block;}

tr[class="to-read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(blue, navy, lightblue);}

tr[class="read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(to top, green, lightgreen,grey);}

tr[class="in-progress"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(lightblue, pink, white);}

dhess · May 19, 2026, 6:16pm

And now when you run the tests, is your first failing test #37?

christinewho2 · May 19, 2026, 10:42pm

oh yeah you’re right.

and now I don’t get that step…

tr[class="read"] {background-image: linear-gradient(to right, rgba(0, 0, 250, 100), rgba(50, 125, 125, 70), rgba(150, 250, 150, 50));}

tr[class="to-read"] {background-image: linear-gradient(red, yellow, orange);}

tr[class="in-progress"] {background-image: linear-gradient(lightblue, pink, white);}
span {display: inline-block;}

tr[class="to-read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(blue, navy, lightblue);}

tr[class="read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(to top, green, lightgreen,grey);}

tr[class="in-progress"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(lightblue, pink, white);}

span[class="status"] span[class="rate"] {width: 50px;
height: 50px;}

ILM · May 20, 2026, 6:11am

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 .

which part of your code has the selector for these?

christinewho2 · May 20, 2026, 2:34pm

do I have to use this sign ‘~=’? or should it be this ‘^=’?

dhess · May 20, 2026, 2:35pm

Take a look at this reference for that:

MDN: Attribute Selectors

christinewho2 · May 20, 2026, 2:38pm

Sometimes English is hard French is my first language just saying, just gonna try every symbol until one work until I missing something do,
was missing a coma, looked up on the forum.

christinewho2 · May 20, 2026, 2:52pm

here’s my new code step 48 is not passing.


tr[class="read"] {background-image: linear-gradient(to right, rgba(0, 0, 250, 100), rgba(50, 125, 125, 70), rgba(150, 250, 150, 50));}

tr[class="to-read"] {background-image: linear-gradient(red, yellow, orange);}

tr[class="in-progress"] {background-image: linear-gradient(lightblue, pink, white);}
span {display: inline-block;}

tr[class="to-read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(blue, navy, lightblue);}

tr[class="read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(to top, green, lightgreen,grey);}

tr[class="in-progress"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(lightblue, pink, white);}

span[class="status"], span[class^="rate"] {width: 50px;
height: 50px;
padding: 0 0 25px 0;}

span[class^="rate"] > span {border: 2px solid rgba(125, 100, 0, 50);
border-radius: 50px;
margin: auto;
height: 5px;
width: 25px;
color: #fff;
background-color: black;}


span[class~=one]:nth-child(1) {background: linear-gradient(white, lightgrey, grey);}

dhess · May 20, 2026, 3:16pm

Are you targeting the first descendant of the span with a class of one? What is the first descendant of that span?

christinewho2 · May 20, 2026, 3:22pm

I didn’t put any classes at the empty span for those after the span[class=“rate one”].

dhess · May 20, 2026, 3:38pm

This selector:

is targeting this span element:

Now you need to target the first descendant of that span element, which is another span element, right?

You are using the right pseudo class (or :first-child), but it’s not applied to the right element. It needs to be applied to the descendant of this element.

christinewho2 · May 20, 2026, 4:56pm

I forgot to add span. before the :nth-child(1)

christinewho2 · May 20, 2026, 4:59pm

now I’m stuck at step 50

tr[class="read"] {background-image: linear-gradient(to right, rgba(0, 0, 250, 100), rgba(50, 125, 125, 70), rgba(150, 250, 150, 50));}

tr[class="to-read"] {background-image: linear-gradient(red, yellow, orange);}

tr[class="in-progress"] {background-image: linear-gradient(lightblue, pink, white);}
span {display: inline-block;}

tr[class="to-read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(blue, navy, lightblue);}

tr[class="read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(to top, green, lightgreen,grey);}

tr[class="in-progress"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(lightblue, pink, white);}

span[class="status"], span[class^="rate"] {width: 50px;
height: 50px;
padding: 0 0 25px 0;}

span[class^="rate"] > span {border: 2px solid rgba(125, 100, 0, 50);
border-radius: 50px;
margin: auto;
height: 5px;
width: 25px;
color: #fff;
background-color: black;}


span[class~="one"] span:nth-child(1) {background: linear-gradient(white, lightgrey, grey);}

span[class~="two"] span:nth-child(-n+2) {background: linear-gradient(white, lightgrey, grey);}

span[class~="three"] span:nth-child(-n+3) {background: linear-gradient(white, lightgrey, grey);}

ILM · May 20, 2026, 5:10pm

I do not see test 50 failing

christinewho2 · May 20, 2026, 5:27pm

I mean it is step 52… forgot to edit the paragraph text before my code.

tr[class="read"] {background-image: linear-gradient(to right, rgba(0, 0, 250, 100), rgba(50, 125, 125, 70), rgba(150, 250, 150, 50));}

tr[class="to-read"] {background-image: linear-gradient(red, yellow, orange);}

tr[class="in-progress"] {background-image: linear-gradient(lightblue, pink, white);}
span {display: inline-block;}

tr[class="to-read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(blue, navy, lightblue);}

tr[class="read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(to top, green, lightgreen,grey);}

tr[class="in-progress"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(lightblue, pink, white);}

span[class="status"], span[class^="rate"] {width: 50px;
height: 50px;
padding: 0 0 25px 0;}

span[class^="rate"] > span {border: 2px solid rgba(125, 100, 0, 50);
border-radius: 50px;
margin: auto;
height: 5px;
width: 25px;
color: #fff;
background-color: black;}


span[class~="one"] span:nth-child(1) {background: linear-gradient(white, lightgrey, grey);}

span[class~="two"] span:nth-child(-n+2) {background: linear-gradient(white, lightgrey, grey);}

span[class~="three"] span:nth-child(-n+3) {background-image: linear-gradient(white, lightgrey, grey);}

christinewho2 · May 20, 2026, 5:36pm

I finished this now I had to remove them :nth-child for the last one.

Build a Book Inventory App - Build a Book Inventory App

Related topics