my CSS dinner solution

http://flukeout.github.io/   a good small training for CSS locator in Selenium.

#1	plate	select all plate
#2	bento	select all bento
#3	plate#fancy	# is for id field
#4	plate>apple	> is parent > chile
#5	plate#fancy>pickle	#3 +#4
#6	apple.small	. is for class field
#7	orange.small	. can use in any level
#8	bento>orange.small	#4 + #6
#9	plate, bento	,  for multiple elements in same level
#10	*	everything
#11	plate.*	#4 + #10
#12	plate+*	"+" is for another element besides current one
#13	pickle ~ pickle	"~" Select elements that follows another element
#14	plate > apple
#15	plate>orange:first-child	#4 +  :first-child  : select the first child element
#16	plate>*:only-child	#4 + #10  +  :only-child  select elements only has one child
#17	plate>apple,pickle:last-child	: last child
#18	plate:nth-child(3)	nth-child()
#19	bento:nth-last-child(3)	nth-last-child,  notice, it is not the 3rd last bento, it is 3rd last elements in same level
#20	apple:first-of-type	:first-of-type : select first of that type of element
#21	plate:nth-of-type(odd)	nth-of-type() :  can be a number or even/odd
#22	plate:nth-of-type(2n+3)	nth-of-type(xn + y ) :  x is the every n element, y is the starting index
#23	plate>apple:only-of-type	only-of-type:  Selects the only element of its type within another element.
#24	orange:last-of-type, apple:last-of-type	last of type: Selects each last element of that type within another element. Remember type refers the kind of tag, so p and span are different types. I wonder if this is how the last dinosaur was selected before it went extinct.
#25	bento:empty	:empty   : element without descendents
#26	apple:not(.small)	not( x )  is something should not be seleted
#27	*[for]	[xxx]  :   xxx is an attribute need be selected
#28	plate[for]	#27 with specific type elements
#29	*[for="Vitaly"]	select the value of attribute
#30	*[for^=Sa]	^ is  startswith
#31	*[for$=ato]	$ is endswith
#32	*[for*=obb]	* is contain