flukeout / css-diner

CSS Diner
http://cssdiner.com
Mozilla Public License 2.0
2.71k stars 342 forks source link

hii ! what is the issue for the 17 please? #194

Open myriamnt opened 4 years ago

ui-coder commented 4 years ago

.small:last-child {} ;)

============== Best regards, Willie S. Ceres (@htmlstrap)

[image: Picture]

On Wed, Mar 4, 2020 at 12:02 PM myriamnt notifications@github.com wrote:

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/flukeout/css-diner/issues/194?email_source=notifications&email_token=AHFJSLFAK6A7RNBOA4VWPDDRFYRKVA5CNFSM4LBBJE5KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4ISKAFWQ, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHFJSLHBCPLFI4SITTIRKZTRFYRKVANCNFSM4LBBJE5A .

myriamnt commented 4 years ago

tks but i don't understand why it is .small:last-child i have three things small: apple orange and pickle and the last child is just a pickle so where is the small apple on".small:last-child"?

ui-coder commented 4 years ago

It's :last-child of first element (.fancy) and parent element (.table)

============== Best regards, Willie S. Ceres (@htmlstrap)

[image: Picture]

On Wed, Mar 4, 2020 at 4:20 PM myriamnt notifications@github.com wrote:

tks but i don't understand why it is .small:last-child i have three things small: apple orange and pickle and the last child is just a pickle so where is the small apple on".small:last-child"?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/flukeout/css-diner/issues/194?email_source=notifications&email_token=AHFJSLCASMO6BU6UMRN6ZYLRFZPTZA5CNFSM4LBBJE5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENYCB2Y#issuecomment-594551019, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHFJSLGPMEMY2POVYYWFK2DRFZPTZANCNFSM4LBBJE5A .

htmlstrap commented 4 years ago

See these specs https://www.w3schools.com/cssref/sel_last-child.asp https://css-tricks.com/almanac/selectors/l/last-child/

Have fun ;)

fwt0209 commented 4 years ago

I guess the orange tag without small class that should be selected, should not it?

This is the practice code linked by following url. https://codepen.io/fwt0209/pen/KKdjKBG

ui-coder commented 4 years ago

It's .small:last-child Have a good one.

Best regards, Willie S. Ceres (@htmlstrap)

[image: Picture]

On Thu, May 28, 2020 at 7:02 AM fwt0209 notifications@github.com wrote:

I guess the orange tag without small class that should be selected, should not it?

This is the practice code linked by following url. https://codepen.io/fwt0209/pen/KKdjKBG

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/flukeout/css-diner/issues/194#issuecomment-635083655, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHFJSLHT4Q256BJMZJE2BFDRTXO5HANCNFSM4LBBJE5A .

erictessin commented 4 years ago

Hey there,

I was also a bit confounded by this problem. I ended up getting it to work with a different solution as well:

apple, pickle, orange :last-child

I don't really understand why this worked, but it did lol. Is this a glitch or is there an explanation?

Thanks!

loopsito commented 4 years ago

Hey there,

I was also a bit confounded by this problem. I ended up getting it to work with a different solution as well:

apple, pickle, orange :last-child

I don't really understand why this worked, but it did lol. Is this a glitch or is there an explanation?

Thanks!

I have the same question, please reply

galaxy-dot commented 3 years ago

Hey there, I was also a bit confounded by this problem. I ended up getting it to work with a different solution as well: apple, pickle, orange :last-child I don't really understand why this worked, but it did lol. Is this a glitch or is there an explanation? Thanks!

I have the same question, please reply

Hi Eric and Loopsito, My understanding of the :last-child is that it will select whatever you put before the : if it is the last child of its parent element.

Refer to Q17's HTML apple is the last-child of the fist pickle is the last-child of the outer

orange is the last:child of second

You can delete orange, it works the same. Something like below:

apple, pickle:last-child

diegoALCE95 commented 3 years ago

This app is so bugged

rvpn commented 3 years ago

apple, pickle:last-child

fredjay commented 2 years ago

Hello

For me the problem was to understand the question : Select the small apple and the pickle OK the solution is simple : apple,pickle

The question would be : Select the small apple and the small pickle In that case, we understand we need to select all "small" items, and find a way to avoid the small orange. And so : .small:last-child

Rolf-B commented 2 years ago

apple, pickle, orange :last-child

The app obviously takes your input and calls querySelectorAll with it, then compares the result with a list of "expected items". If they match, your input is considered good, even if it doesn't use the lesson content.

That's why apple, pickle works at all. The purpose of the lesson was the :last-child pseudo class.

And orange :last-child selects nothing, because there's a space between orange and :last-child, and the markup contains no orange with a child element.