Assessment wanted for "Tables" Task

MDN Learn
1

Hi, Hi, I would like an assessment for MDN assessment page for Tables Task.

here is a link to my solution of the table https://glitch.com/edit/#!/cord-aquamarine-pickle

Thank you.

2

Very well done, @Honlim_Wong!
Everything looks like it should. Congratulations! :medal_sports:

You could save some code with more generic text-align selectors. The alignment is the same for thead and tbody, so we can just use tr. Additionally it doesn’t matter if the child is a th or td, so we can also remove them and just use :nth-child():

tr :nth-child(2),
tr :nth-child(3) {
  text-align: right;
}

tr :nth-child(1),
tr :nth-child(4) {
  text-align: left;
}

Enjoy your sunday!
Michael

3

Thank you, the codes looks much more tidier after retried. Now I know the :nth-child(n)can be an independent selector.

1 Like
4

Yeah, it’s a nice fact to know about. As we often use pseudo-classes to style hover effects of links (a:hover) or input focus (input:focus) it is easily forgotten that they can also be used on there own.

5

I just come to realized that you can’t find pseudo classes and pseudo elements in HTML Document.

You can target and style HTML element(s); add a class/ID to HTML doc and style them, but you won’t find pseudo classes and pseudo elements in HTML Doc!

It seem that they are designed intentionally for very specified purpose.

6

You are right, that you can’t see them in the DOM, hence the name “pseudo”. Both have in common that they are attached to “real” elements and can therefore be style through those “real” elements. You can think of pseudo-classes as states of the element they are attached to. Those states can be toggled in the FireFox DevTools inspector:
2021-08-09 19_21_36-Assessment wanted for Tables Task - MDN _ Learn - Mozilla Discourse - Firefox

I recommend reading MDN | Pseudo-classes and pseudo-elements to get an overview.

Michael