Build a book inventory

HTML-CSS
21

What else have you tried?

Also why do you specify the class with *= ?

22

There might be an issue pasting code with the rich text editor. You can try switching it to markdown here.

Maybe sure the M is selected, not the A

Screenshot 2025-12-13 170659
Screenshot 2025-12-13 170659257×191 13.4 KB

23

With out the * it does not work right and putting < between the two does not work either and brakes it. I have called them in every way except for the long way with each one selected in the element section and that would make it less readable then more. Also this is the way they were doing things up until now.

24

now I can say that I have tried the long hand way and it does not work either

25

What does the code for those different attempts look like? I do not know what ‘long hand way’ means.

Experimentation is good, but you need a better reason to add a piece of syntax other than ‘it also did not work without that syntax’.

Playing around, it seems like*= doesn’t match the whole word, and the way you are listing two separate conditions isn’t enforcing that both must be true at the same time.

26

The main differences were:

Child vs descendant selector (> vs space)
Quote style (single vs double quotes)
Gradient colors (different color values)
Direction (left-to-right vs right-to-left)

27

this was the code

span[class*='one'] > span:first-child{
    background-image: linear-gradient(to right, #ff758c, #ff7eb3);
}

span[class*='two'] > span:nth-child(-n+2) {
    background-image: linear-gradient(to right, #ff758c, #ff7eb3);
}

span[class*='three'] > span {
    background-image: linear-gradient(to right, #ff758c, #ff7eb3);
}

span[class*='one'] span:first-child{
    background-image: linear-gradient(to right, #ff758c, #ff7eb3);
}

span[class*='two'] span:nth-child(-n+2) {
    background-image: linear-gradient(to right, #ff758c, #ff7eb3);
}

span[class*='three'] span {
    background-image: linear-gradient(to right, #ff758c, #ff7eb3);
}

span[class*="one"] span:first-child{
    background-image: linear-gradient(to right, #891629, #ff7eb3);
}

span[class*="two"] span:nth-child(-n+2) {
    background-image: linear-gradient(to right, #891629, #ff7eb3);
}

span[class*="three"] span {
    background-image: linear-gradient(to right, #891629, #ff7eb3);
}

span[class*="one"] span:nth-last-child(1){
    background-image: linear-gradient(to right, #891629, #ff7eb3);
}

span[class*="two"] span:nth-last-child(-n+2) {
    background-image: linear-gradient(to right, #891629, #ff7eb3);
}

span[class*="three"] span:nth-last-child(-n+3) {
    background-image: linear-gradient(to right, #891629, #ff7eb3);
}
28

this is the example

image
image884×1080 68.2 KB

this is mine

image
image946×834 117 KB

29

I really, really think * is wrong. What are the other options?

This looks closer, but after the > I don’t think you need to say ‘span’

30

Hi there! For the last tests (46–51), freeCodeCamp is very specific about how the selectors are written. Instead of using more concise selectors, try being more explicit and target each span individually.

Hope this helps.

31

Just so there is no confusion, here is some code you posted:

span[class*=‘two’] > span:nth-child(-n+2) {
background-image: linear-gradient(to right, #ff758c, #ff7eb3);
}
span[class*=‘three’] > span {
background-image: linear-gradient(to right, #ff758c, #ff7eb3);
}

The code above should be written explicitly, like what you did here:

span[class*=‘one’] > span:first-child {
background-image: linear-gradient(to right, #ff758c, #ff7eb3);
}

Hope this helps.

32

still fail it with that included

33

this is what I am looking at no matter what I have done and I started with

span[class*=‘one’] > span:first-child {
background-image: linear-gradient(to right, #ff758c, #ff7eb3);
}

image
image887×1080 103 KB

34

Don’t try to write solutions for people please

35

Did you read my last message? I got your code to pass with the changes I talked about

36

do you also want to select a class like cone? this would do it. You need to check which symbol you need to use in the attribute selector

39

Foi mal :sweat_smile: ! I finished the challenge and then noticed that what I sent you before wasn’t quite right.

Please take another look at the wording in tests 46–51:

  • Look at how the tests describe the class matching. I think it would really help you resolve the issue if you reviewed the different attribute selectors: =, ~=, |=, ^=, $=, *=.

  • Also, look at how the tests describe the relationship. The tests say “descendants,” not “children.” If you’re not sure about this, try looking up CSS combinators, which may help you figure out what you are doing incorrectly.

1 Like