Learn More About CSS Pseudo Selectors by Building A Balance Sheet - Step 63

HTML-CSS
1

Tell us what’s happening:

My solution won’t pass and apparently the problem is an incorrect selector used. But the suggested fix is exactly what’s in my code. Please help guys.

Your code so far

<!-- file: index.html -->


/* file: styles.css */
/* User Editable Region */

} tr.data th.description {
  display: block;
  font-weight: normal;
  padding: 1rem 0 0.75rem;
  margin-right: -13.5rem;
  font-style: italic;
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36

Challenge Information:

Learn More About CSS Pseudo Selectors by Building A Balance Sheet - Step 63

2

Most of the time what you write gets the job done, but if it doesnt do exactly what the test ask for, it won’t pass.

I looked at the question and you should give a space between
th and .description in the

part of your selector.

1 Like
3

I’m almost certain I’ve tried that on tr .data and on th .description as well. But I’ll go ahead and try it again

4

why this line starts with a }? is the previous selector closed properly?

1 Like
5

Well I was trying to check if all is well with the previous line so I backspaced until that curly brace crept down to the line I was working on. But Jonathan’s fix worked so, thank you.

6

Hey thanks man, it worked. But I’m really puzzled as to why it did, because there was no space between tr and .data in the fix.

7

Might be a long read!
Looking at the html code it should be cos the .data is a classname of the tr, as in <tr class="data"></tr> so if you give them a space you’re literally selecting one element twice. Hence, whatever styling you apply to the selectors might get messed up cos your’re selecting an element twice, first with the element name(tr) and next with the classname(.data). You didn’t give a space cos they’re so many tr elements in your code but you only wanted to select the tr elements with the class .data.

But as for the th and .description, recall that in the html the code is <th>Cash <span class="description">some texts</span></th>. Even though span element with the class .description is nested inside of th element they’re still seperate elements and can be treated as such, you can choose to select th element and style it and also choose to select .description class a.k.a span element and style it.
In other words

  1. th { }
  2. .description { }
  3. th.description { }
  4. th .description { }

are totally different selectors.
The first selects th elements and style them.
The second selects elements with the class .description and style them.
The third selects elements with the class .description that are nested inside or are children of the th elements and style them.
The fourth selects both the th elements and elements with the class .description simultaneously and style them (this is the one they wanted you to use in the test, so both the word Cash in the th element and the texts in the .description class or span element will have block display and the other styles given to them).
Do you get it now?

1 Like
8

Yes, finally I get it. Thank you so much for taking your time to give such an elaborate, easy to grasp explanation. I learnt something today after having ignored this challenge for a week. Thank you man🙏

1 Like