Step 56 balance sheet

I hadn’t noticed how amazing this forum is, in order to learn in a better way and understand all the topics, For that reason, I’m going to make a question about a previous unit, Despite I’m rightnow in an advanced lesson. In this step I didn’t understand the difference between The key difference between tr[class=“total”] and tr.total.

In this lesson it is explained that the The key difference between tr[class="total"] and tr.total is that the first will select tr elements where the only class is total . The second will select tr elements where the class includes total.

But actually I’m not clear about this point. Can someone explain this to me.?
Thanks!

1 Like

if you have this code

<tr class="total two"></tr>
<tr class="total"></tr>

The first line represents an element with 2 classes
The second line represent an element with exactly one class.

So then your selectors would select based on this.
For tr.class it would select both of the elements.
But the other selector would only select the 2nd one.

In this case we have tr[class="total"], so I understand that as if it were selecting only the class called “total” and the second tr.total, I undertand it in the same way. It is selecting Total, even I tried to make changes inside the code, and I didn’t notice any change when using one of them. Am I wrong?

I’m having a hard time understanding your follow-up question. Can you rephrase it please?

tr[class="total"] and tr.total I think these both do the same. In this case, both declarations are selecting the total from a row. That is my doubt and that is what I don’t understand, I see no difference. And I appreciate your help. :hugs:

as I said, they are different.
Here’s a codepen to illustrate the differences (please re-read my explanation after you review the sample code I posted)

Thank you for your help, I appreciate it a lot, Maybe I don’t understand things at first time, I read your message, and also I already saw the explanation in the link you sent to me, but I wasn’t able to see the class “two” inside that css. So I can’t see what is happening when the class called “two” is applied together with the class “one”. I think I would understand better reviewing the “step 56”, so I could see what you are saying in a better way.

i purposefully do not reference class two because i am trying to illustrate the difference between the two class one selectors.

you said you believed both types of selectors do the same thing, but they don’t. if they did the codepen would show pink “one” text and pink “two” text.

1 Like

That’s great! Thank you Very much! I appreciate your help!

1 Like