Hi. Any assessment would be appreciated. Thank you and have a good day!
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
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.
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
@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
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
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
Thanks for clearing things up, @chrisdavidmills . It really helped!