Kdb13: Assessment wanted for Selectors skill test

MDN Learn
1

Selectors 1: https://codepen.io/kdb13/pen/mdErQxY
Selectors 2: https://codepen.io/kdb13/pen/bGewQKV
Selectors 3: https://codepen.io/kdb13/pen/abZmQKY
Selectors 4: https://codepen.io/kdb13/pen/YzWGRvB
Selectors 5: https://codepen.io/kdb13/pen/mdErQjZ

Assessment page: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks

2

Hello @kdb13

you doing great another more generic way for number 3 is using this

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

.container > :first-child::first-line {
  color: red;
}

your answer is correct i just wanted to let you know another more generic way to solve it

in this could despite the first child that come below the container class it will apply the rule for it

well done and have a nice day

1 Like
3

I am a little confused as the :first-child pseudo-class should already target the first direct child, then why is not working without using the direct combinator > ?

Instead .container :first-child is targeting the table as well, of .container.

Thanks.

4

welcome back @kdb13

sorry for late replay

this
.container :first-child
interpreted as
.container *:first-child

which combine the first-child class for any element that already has .container as parent or parent’s parent

that why it make the table get affected also as from the html code table is child of the container and it also first child of tables

hope that help and have a nice day :slight_smile: