Skip to content

Instantly share code, notes, and snippets.

@chrisman
Created August 2, 2017 18:21
Show Gist options
  • Save chrisman/fcb0a88459cd98239dbe6d2d200b02d1 to your computer and use it in GitHub Desktop.
Save chrisman/fcb0a88459cd98239dbe6d2d200b02d1 to your computer and use it in GitHub Desktop.
solutions for css diner
# https://flukeout.github.io/ #
01. plate
02. bento
03. #fancy
04. plate apple
05. #fancy pickle
06. .small
07. orange.small
08. bento orange.small
09. plate, bento
10. *
11. plate *
12. plate + apple
13. bento ~ pickle
14. plate > apple
15. orange:first-child
16. plate apple:only-child, plate pickle:only-child
17. .small:last-child
18. plate:nth-child(3)
19. bento:nth-last-child(3)
20. apple:first-of-type
21. plate:nth-of-type(even)
22. plate:nth-of-type(2n+3)
23. plate apple:only-of-type
24. orange:last-of-type, apple:last-of-type
25. bento:empty
26. apple:not(.small)
27. *[for]
28. plate[for]
29. bento[for="Vitaly"]
30. *[for^="Sa"]
31. *[for$="ato"]
32. bento[for*="obb"]
@rogererens
Copy link

rogererens commented Oct 8, 2020

16. plate :only-child
18. :nth-child(3)
21. :nth-of-type(even)
22. :nth-of-type(2n+3)
23. apple:only-of-type
24. .small:last-of-type

@eceban
Copy link

eceban commented Dec 23, 2020

( 16. plate :only-child ) doesn't work

@lyconey
Copy link

lyconey commented Dec 30, 2020

  1. (plate:only-child) doesn't work. pls fix it

@JanDirkKoersma
Copy link

  1. plate :only-child

@idembele70
Copy link

Thanks Your a Gem

@DZN1636
Copy link

DZN1636 commented Apr 4, 2021

Thanks for the awesome work. Can someone explain why 19. bento:nth-last-child(3) worked? For me it seems like it's the 2nd bento backward, so I think about bento:nth-last-child(2) instead.

EDIT: found the answer: flukeout/css-diner#205

@Usiel-03A7
Copy link

16.- plate :is(apple, pickle)

@kobi2132
Copy link

kobi2132 commented Oct 3, 2021

  1. bento:nth-last-child(3)
    why 3 and not 2?

@idembele70
Copy link

yea kobi2132, i thinked the same, but i think with nth child, if other item is as the same level of a child then it counted, i don't know if you understand my explanation

@Yes-07
Copy link

Yes-07 commented Apr 28, 2022

( 16. plate :only-child ) doesn't work

It's supposed to be
plate>:only-child()
Don't know if they missed the greater than symbol or is it just their keyboard that's acting up

And uhh if you already know it then congratulations!

@2HEADSs
Copy link

2HEADSs commented May 3, 2022

  1. plate :only-child

try by yourself

@V3R0S3
Copy link

V3R0S3 commented Aug 11, 2022

thanks

@asirheras
Copy link

asirheras commented Oct 29, 2022

( 16. plate :only-child ) doesn't work

This is plate [SPACE]:only-child.
This isn´t plate:only-child.

@diegoferraribruno
Copy link

  1. bento + pickle, pickle + pickle

@Sarah0302
Copy link

what means ,,even" in 21?

@FedericoCapaldo
Copy link

what means ,,even" in 21?
@Sarah0302 it means get each child that is at even position in the list of children (0,2,4,..)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment