Assessment wanted for tables skill test)

MDN Learn
#1

And last task for me today :grinning:.
Need assessment for tables skill test.
codepen

#2

nice job @VladimirK but it would be better to do it without changing the html code so no class :wink:

and have a nice day :slight_smile:

2 Likes
#3

Ok, thanks you! But decide to use classes for situation if i need to add other columns.

#4

Solution without classes for columns.

#5

well done :slight_smile:

1 Like
#6

I’m sorry for bumping a dated topic but I came across this post and I was wondering about Vladimir’s solution without classes for columns.

Regarding the following code:

td:nth-child(2), td:nth-child(3)

Although the code is meant to be targeting the second and third instances of td in the rows from the assessment, they’re actually being applied to the first and second instances. Why is this happening?

3 Likes
#7

Hi @Nohbdy and welcome to the community :wave:

That’s an excellent question!

td:nth-child(2) does not mean “The second td that is a child of something”.
It means "The second child if it’s also a td".

When we look at the (simplified) code from the exercise:

<!-- Selector: td:nth-child(2) -->
<tr>
  <th></th> <!-- is second child? NO  / is <td>? NO -->
  <td></td> <!-- is second child? YES / is <td>? YES -->
  <td></td> <!-- is second child? NO  / is <td>? YES -->
  <td></td> <!-- is second child? NO  / is <td>? YES -->
</tr>
<!-- Two times YES -> The element is selected -->

You can also use :nth-child(2) without an element in front of it. Then it simply means “The second child whatever element it is”.

With this new knowledge we can now simplify the selector from the solution:

<!-- before -->
th:nth-child(2), th:nth-child(3), 
td:nth-child(2), td:nth-child(3)  {
	text-align: right;
}

<!-- after -->
:nth-child(2), :nth-child(3)  {
	text-align: right;
}

We just select the second and third children. No matter if they are <th> or <td>.

I hope this helps you understanding the situation.

Have a nice weekend,
Michael

3 Likes
#8

I understand now. It was a bit frustrating to solve the assessment earlier. Thank you.

2 Likes