Assessment needed for Selectors skill test 1

MDN Learn
1

Hello everyone,

I haven’t been there on forum for a quite long while. I took the front end course, but mozilla learning area has always being with me. I recap some things since recent time.

I’m doing a Selectors Three Task, and would like to understand, the selector I wrote not working:

table > :nth-child(2n){
      background-color: #333;
      color: #fff;
 }

I was inspired by the re9inee solution of different point from this task, when he wrote such a selector:

container > :first-child {
      font-size: 150%;
}

What is wrong with the :nth-child pseudo class that it’s not working the same way in the combination with the “>” combinator?
Demo

Kind regards,
Denis

2

Hi @DenisM and welcome back!

A general advice when a selector doesn’t work: Have a look at the inspector in the DevTools.
When we do this with your live code we get this:

2022-05-18 19_12_15-Selectors Three
2022-05-18 19_12_15-Selectors Three190×351 3.77 KB

As you see, the browser automatically inserted a <tbody> tag around all rows. Therefore your selector would match the next sibling after <tbody> (which doesn’t exist).

Have a nice day,
Michael

2 Likes
3

@mikoMK
Oh, Michael, very much obliged to you!
I forgot about this automatical tbody’s injection at all, in spite of the fact that had learned about this earlier. To memorize such things for certain one have to face them in practice in such a way.

Thank you again,

Kind regards
Denis

4

I completely agree you that. Happened to me to; will also happen to me in the future. :grin:

1 Like