[CSS] CSS Diner

👀 CSS Diner

CSS Diner라는 게임을 이용해서 CSS Selector에 대해서 알아본다.

✔ 1. Select the plate

plate
:plate 태그를 모두 선택

✔ 2. Select the bento boxes

bento
:bento 태그를 모두 선택

✔ 3. Select the fancy plate

#fancy
:fancy 아이디를 모두 선택

✔ 4. Select the apple on the plate

plate apple
:plate를 부모로 가지는 apple을 모두 선택

✔ 5. Select the pickle on the fancy plate

#fancy pickle
:fancy 아이디를 부모로 가지는 pickle을 모두 선택

✔ 6. Select the small apples

.small
:small 클래스를 모두 선택

✔ 7. Select the small oranges

orange.small

:orange 태그를 가지면서 small 클래스를 가지는 요소를 모두 선택

✔ 8. Select the small oranges in the bentos

bento orange.small
:bento가 부모이면서 orange 태그와 small 클래스를 동시에 가지는 요소를 모두 선택

✔ 9. Select all the plates and bentos

plate, bento
:plate와 bento 태그를 모두 선택

✔ 10. Select all the things

*
:모두 선택

✔ 11. Select everything on a plate

plate *
:plate의 자식을 모두 선택

✔ 12. Select every apple that's next to a plate

plate + apple
:plate 태그 바로 다음에 나오는 apple 태그를 모두 선택. 단, 두 element는 같은 level과 depth를 가져야 함

✔ 13. Select the pickles beside the bento

bento ~ pickle
:bento 이후로 존재하는 pickle 태그를 모두 선택. 연속하지 않아도 되고, 이후에 나오는 모든 sibling 요소를 포함한다.

✔ 14. Select the apple directly on a plate

plate > apple
:plate를 direct 부모로 가지는 apple 태그를 모두 선택

✔ 15. Select the top orange

orange:first-child
:nesting 되어있는 첫번째 orange를 선택

✔ 16. Select the apple and the pickle on the plates

plate :only-child
:plate를 부모로 가지고 plate 속에 하나밖에 없는 요소를 모두 선택. (apple:only-child라고 하면 only-child인 apple을 모두 선택. 빈칸 주의!)

✔ 17. Select the small apple and the pickle

.small:last-child
:small 아이디를 가지면서 last-child인 요소를 모두 선택

✔ 18. Select the 3rd plate

plate:nth-child(3)
:3번째이면서 plate인 요소를 선택 (3번째 plate를 선택하는것이 아님. 만약 plate, plate, bento, plate가 있다면 plate:nth-child(3)를 해도 아무것도 선택되지 않음. plate:nth-child(4)를 해야 마지막 plate가 선택됨)

✔ 19. Select the 1st bento

bento:nth-last-child(3)
:마지막에서 3번째이면서 bento인 요소를 선택

✔ 20. Select first apple

apple:first-of-type
:첫번째 apple 태그를 선택

✔ 21. Select all even plates

plate:nth-of-type(even)
:plate중 짝수번째 plate를 모두 선택 (nth-child와는 다르게 plate중에서만 선택함. 만약 plate, plate, bento, plate가 있고 plate:nth-of-type(odd)를 한다면 1,4번째 plate가 선택됨. plate 중에서는 1,3번째이므로!)

✔ 22. Select every 2nd plate, starting from the 3rd

plate:nth-of-type(2n+3)
:3번째부터 every 2nd plate를 모두 선택

✔ 23. Select the apple on the middle plate

plate apple:only-of-type
:plate 태그 내에 유일한 apple 태그를 선택

✔ 24. Select the last apple and orange

.small:last-of-type
:small 클래스를 가지면서 가장 마지막 요소들을 모두 선택

✔ 25. Select the empty bentos

bento:empty
:자식 요소가 없는 bento를 모두 선택

✔ 26. Select the big apples

apple:not(.small)
:small 클래스가 아닌 사과를 모두 선택

✔ 27. Select the items for someone

[for]
: for 특성을 가진 요소를 모두 선택

✔ 28. Select the plates for someone

plate[for]
: for 특성을 가진 plate 태그를 모두 선택

✔ 29. Select Vitaly's meal

[for="Vitaly"]
: Vitaly라는 value의 for 특성을 가진 태그를 모두 선택

✔ 30. Select the items for names that start with 'Sa'

[for^="Sa"]
: Sa로 시작하는 value의 for 특성을 가진 태그를 모두 선택

✔ 31. Select the items for names that end with 'ato'

[for$="ato"]
: ato로 끝나는 value의 for 특성을 가진 태그를 모두 선택

✔ 32. Select the meals for names that contain 'obb'

[for*="obb"]
:obb가 포함된 value의 for 특성을 가진 태그를 모두 선택

👍 참고 사이트

1. CSS Diner
2. CSS Diner 완료(답안/요점정리) (1/3)
3. CSS Diner 완료(답안/요점정리) (2/3)
4. CSS Diner 완료(답안/요점정리) (3/3)