css-diner
css-diner copied to clipboard
flukeout
CSS Dinner 19
Despite using the correct CSS selector which is bento:nth-last-child(2) it doesn't work.
However, it accepts bento:nth-last-child(3) which is incorrect.
bento:nth-last-child(3) is the right answer. I might be thinking about nth-last-of-type(2)
bento:nth-last-child(3) should be correct because the bottom bento is nth-last-child(1), plate is nth-last-child(2) and the top bento is nth-last-child(3).
it is correct syntax -- bento:nth-last-child(3) -- however I do consider this syntax to be somewhat illogical. Perhaps the hints need a minor update. It is more intuitive to refer to the children with respect to the parent, like this: [INCORRECT] table:nth-last-child(3) Cleverly, *:nth-last-child(3) is an incorrect selector, because there is also a third orange! ... learning github ... expect to contribute soon
It is confusing as there are only 2 <bento /> tags.
But bento:nth-last-child(3) is indeed correct.
Try out the below code.
<!-- test.html -->
<style>
bento:nth-last-child(3) {
background-color: lightgreen;
}
</style>
<body>
<div class="table">
<plate>plate1</plate>
<bento>bento1</bento>
<plate>
plate2
<orange>orange</orange>
<orange>orange</orange>
<orange>orange</orange>
</plate>
<bento>bento2</bento>
</div>
</body>
Despite using the correct CSS selector which is
bento:nth-last-child(2)it doesn't work. However, it acceptsbento:nth-last-child(3)which is incorrect.
No, it doesn't work
I think it selects all third-child(parent is div or table) bento element, like the explanation from level 17.
Also I tried .table > :nth-last-child(3) & div > :nth-last-child(3) work on @minho42 's test.html but not on level 19.
Let's see if I can clear up some of the confusion.
:nth-last-child(n) is a CSS pseudo-class that targets every nth element's child, starting from the bottom, so for example, :nth-last-child(1) will target the 1st last child of every element, or the first starting from the bottom:
<A>
<C>
<C>
<B>
<B>
<C> <-- 1st last child
</A>
<A>
<C>
<B>
<B>
<C>
<C> <-- 1st last child
</A>
:nth-last-child(2) will target the 2nd last child of every element, or the second counting from bottom:
<A>
<C>
<C>
<B>
<B> <-- 2nd last child
<C>
</A>
<A>
<C>
<B>
<B>
<C> <-- 2nd last child
<C>
</A>
:nth-last-child(3) will target the 3rd last child of every element, or the third counting from bottom:
<A>
<C>
<C>
<B> <-- 3rd last child
<B>
<C>
</A>
<A>
<C>
<B>
<B> <-- 3rd last child
<C>
<C>
</A>
and so on and so forth.
Prepending it with any other selector though, say C, and letting n=2 (C:nth-last-child(2)) will make it target the 2nd last child only if it's actually a C element:
<A>
<C> <-- and the 5th last child as well
<C> <-- but the 4th last child is
<B>
<B> <-- 2nd last child is NOT a C element; not targeted
<C>
</A>
<A>
<C>
<B>
<B>
<C> <-- 2nd last child IS a C element; targeted
<C>
</A>
Another way to think about this is that it targets all C elements, but only if they're the 2nd last child of another element. In fact this could be the more correct way to think about it.
My understanding (bento refers to element, but :nth-last-child(3) actually looks at this elements' parent and (3) then points to last 3rd element of bento's siblings (bento's parent's children).
Can anyone confirm this thinking?
My understanding:
nth-last-child does not include/care about the type. Only, if the nth-last-child(3) in bento:nth-last-child(3) is a <bento>, styles will apply.
My gripe with this is: I used .table bento:nth-last-child(3) which will work in principle, but not in this example.
