👌 CSS Diner Answers
✔ 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 특성을 가진 태그를 모두 선택
👍 참고 사이트
