Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
21
  • td elements of the Rate column should contain a span element with the class of rate wrapping three empty span elements.
  • .rate elements placed inside .read rows should have an additional class with the value of either one, two, or three, depending on the personal rate. This value should come after rate.

Those are in the instructions for me?

22

they do, user stories 6 and 7 and 14, tests 16, 17, 18, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45

23

No worries! It’s there in the User Stories number 14. It says:

You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their border , border-radius , margin , height , width , and background-color

24

Here’s where I’m at.

span[class="status"], span[class^="rate"] {
  height: 35px;
  width: 50px;
  padding: 3px 3px;
 }
 span[class="rate"]
 {border: 3px solid olive
 ;
 border-radius: 7px;
 margin: 3px;
 height: 25px;
 width: 50px;
 background-color: blue;
 }
 span[class="one"], span[class="rate"]
 :nth-child(1) {
  background-image: linear-gradient(41deg, turquoise, yellow);
 }
  span[class="two"], span[class="rate"] :nth-child(2) {
  background-image: linear-gradient(45deg, orange, yellow);
}
  span[class="three"], span[class="rate"] :nth-child {
  background-image: linear-gradient(41deg, turquoise, yellow);
  }
25

Ok, let’s take this step by step.
Can you explain what this span[class^="rate"] does? It might help you with step 39.

26

this one will not select anything, you do not have an element that has only class="one"
the attribure selector has some modifiers for how the value is matched, you may want to review them

27

That step wouldn’t work without the ^.

28

and why it would not work?

29

I will try that. Thanks.

1 Like
30

It wouldn’t pass 35 without it.

31

Yes but my point was, the same syntax ^ could help you with step 39.

32

Didn’t work. Darn it. Thanks for you patience with me. I’m used coding with logical code, not decorative.

33

No problem. Let’s see what you tried for step 39.

34 
span[class^="one"], span[class="rate"]
 :nth-child(1) {
  background-image: linear-gradient(41deg, turquoise, yellow);
 }
35

and do you know why? do you understand what you are writing and why that is the requirement of the test?

36

do you have an element with class one?
Also step 39 says you should only target span elements that are children of the span with class of rate.

37

I am struggling with this and I can’t seem to find the info in the course.

38

how did you figure out you had to use ^?
also do you remember where you met it the first time?

39

I don’t have one with the class one. Just the rate one, which I notice was missing in the html, so I put it in.

40

I found it here from another post. I don’t remember where I met it.