Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Diner Solutions
http://flukeout.github.io/
#01 plate
#02 bento
#03 #fancy
#04 plate > apple
#05 #fancy pickle
#06 .small
#07 orange.small
#08 bento > orange
#09 plate, bento
#10 *
#11 orange.small, pickle, plate > apple
#12 plate + apple
#13 bento ~ pickle
#14 plate > apple
#15 plate orange:first-child
#16 plate *:only-child
#17 #fancy *:last-child , plate + pickle
#18 plate:nth-child(3)
#19 bento:nth-last-child(4)
#20 apple:first-of-type
#21 plate:nth-of-type(2n)
#22 plate:nth-of-type(2n+3)
#23 plate apple.small:only-of-type
#24 orange:last-of-type , apple:last-of-type
#25 bento:empty
#26 apple:not(.small)
@flukeout

This comment has been minimized.

Copy link

flukeout commented Jun 7, 2017

🍎 🍊 🍱

@porcoespinho

This comment has been minimized.

Copy link

porcoespinho commented Aug 31, 2017

As of 08/31/2017: #19 was bento:nth-last-child(3)

@qedpro10

This comment has been minimized.

Copy link

qedpro10 commented Sep 2, 2017

#27 [for]
#28 plate[for]
#29 [for="Vitaly"]
#30 [for^="S"]
#31 [for$="o"]
#32 [for*="bb"]

@DoSDa

This comment has been minimized.

Copy link

DoSDa commented Sep 27, 2017

#08 bento > orange

,- wrong

@JBeni

This comment has been minimized.

Copy link

JBeni commented Oct 23, 2017

#08 bento > orange.small

@tejveeerboparai

This comment has been minimized.

Copy link

tejveeerboparai commented Feb 4, 2018

how is 27 [for]
it works but why?

@mutheusalmeida

This comment has been minimized.

Copy link

mutheusalmeida commented Feb 26, 2018

#27 bento:empty selects all bentos that have no children: the first one and the last one

@sebahsr

This comment has been minimized.

Copy link

sebahsr commented Dec 14, 2018

#27 [for]
#28 plate[for]
#29 [for="Vitaly"]
#30 [for^="Sa"]
#31 [for$="ato"]
#32 [for*="obb"]

@GlenjaminDanks

This comment has been minimized.

Copy link

GlenjaminDanks commented Mar 12, 2019

#8 is wrong. bento > orange.small

@wbdvlprdrm

This comment has been minimized.

Copy link

wbdvlprdrm commented May 29, 2019

#19 bento:nth-last-child(3)

@Paulmohabir88

This comment has been minimized.

Copy link

Paulmohabir88 commented Nov 7, 2019

i'm trying to figure out number 19 i don't understand why the nth-last-child is 4
I know we're trying to identify the right most thing in css
so i thought it would be 1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.