Assessment Request for Styling Basics 1 Skill Test

Hi. Any assessment would be appreciated. Thank you and have a good day! :beach_umbrella:

Styling Basics 1

Hello @harryghgim

you doing great well done

just a question what you trying to do with that rule
ul > :last-child {
margin-top: 40px;
}

have a nice day

1 Like

Really good job here — well done @harryghgim !

The only coment I have is that you might want to ease up on the border-radius a bit — on some browsers (like Firefox), that amount of border radius interferes with the select box down indicator, and fields with a large amount of border radius tend to get mistaken for search boxes.

1 Like

Hi. @justsomeone!

If I don’t set the margin-top thing the button is too close to the input, which I didn’t like. That’s why I set that :grinning:

@chrisdavidmills Thanks for pointing that out! I’ll keep that in mind!

Hello @harryghgim and @chrisdavidmills

can you explain why this selector work
ul > :last-child {
margin-top: 40px;
}
cause in my humble opinion it should be ul > *:last-child or i am missing something here

thanks and have nice day

1 Like

Hi again, @justsomeone!

In my little knowledge pseudo-class thing works even without asterisk in front of it.

Asterisk per se means everything, but since I selected the last child under ul, which is only one, I don’t think the asterisk will be necessary in this case. Hope I didn’t get wrong!

Hello @harryghgim

thanks for your help but i wonder why it work without putting anything in front of it
i tried even to validate the following code in
https://jigsaw.w3.org/css-validator/#validate_by_input

with all those version

ul > :last-child {
margin-top: 40px;
}

and

ul > *:last-child {
margin-top: 40px;
}

and even

:last-child {
margin-top: 40px;
}

the validator said all are valid code which still confusing me

hope @chrisdavidmills help me here

thanks for both of you and have a nice day

1 Like

Hi there folks,

I added a note to our Pseudo-classes and pseudo-elements article to clear this up a bit (hopefully):

Note : It is valid to write pseudo-classes and elements without any element selector preceding them. In the example above, you could write :first-child and the rule would apply to any element that is the first child of an <article> element, not just a paragraph first child — :first-child is equivalent to *:first-child . However, usually you want more control than that, so you need to be more specific.

So in the case we are talking about in this thread, ul > :last-child selects any element that is the last child inside a <ul> element. But only immediately below itin the hierarchy, as we are using the child selector (>). If we put ul :last-child instead, then any last children in the hierarchy would be selected, even those further down in the element hierarchy.

ul > *:last-child is equivalent to ul > :last-child.

:last-child will select any element that is a last child in the entire document. It makes no difference in a simple example like this, but you probaby don’t want to do this on a real web site :wink:

1 Like

Hello @chrisdavidmills

thanks alot that make it clear

have a nice day :slight_smile:

1 Like

Thanks for clearing things up, @chrisdavidmills . It really helped! :grinning: