CSS selector 게임으로 배워보자 CSS Diner (1 - 19)

 

중복 개념은 제외함

 

 

Select the plates

 

plate

 

 

#id_name

 

#fancy

 

 

plate apple

 

plate 위에 apple

plate 박스 안에 apple

 

 

 

#id-name object

 

#fancy pickle

 

id 위에 피클

 

 

 

 

apple.small

 

 

apple인데 small 클래스

클래스는 공유 가능

 

 

 

bento orange.small

 

벤또 위에 오렌지인데 small클래스

 

 

 

plate, bento

 

 

 

 

plate *

 

plate 위에 everything

 

 

 

plate+apple

 

plate 와 결합된 apple

 

 

 

 

 

bento ~ pickle

 

bento에서 부터 pickle까지

bento는 제외

pickle.small / pickle / plate pickle / plate pickle.small

 

 

 

 

plate > apple

 

plate에서 바로 apple인 객체

 

 

 

 

 

plate orange:first-child

 

 

 

 

plate apple, plate pickle

plate apple:only-child, plate pickle:only-child

 

 

 

#fancy apple.small, pickle.small

plate apple, pickle

#fancy apple.small:last-child, pickle.small:last-child

#fancy apple.small, pickle.small:last-child
#fancy apple, pickle:last-child
apple.small, pickle.small

 

 

 

 

 

plate:nth-of-type(3)

 

 

 

 

 

 

bento:nth-last-child(3) 

뒤에서 3번쨰 객체인 벤토

 

bento:nth-of-type(1)

첫번째 벤토

 

bento:nth-child(2)

두번째 객체인 벤토

 

plate:nth-of-type(1)+bento

 

plate:not(orange)+bento (논리적으로 맞으나 실행은 안됨)

 

 

 

20번째 부터 시작