✔ 📝 Level 18. 세 번째 접시를 선택하시오 ( :nth-child(A) )
<div class="table"> <plate /> <plate /> <plate /> <plate id="fancy" /> </div>답: plate:nth-child(3)
:nth-child(A)는 형제 사이에서의 순서에 따라 요소를 선택한다.
18번 문제와 19번 문제가 내가 제일 헷갈렸던 부분인데, 사실 이 부분을 명확하게 하고자 정리본을 올리게 된 것이 크다.
📝A:nth-child(B)로 보았을 때, A 부분에 중점을 두는 것이 아닌 B 부분을 기반으로 A 요소를 보는 것이다.
무슨 뜻이냐면,p:nth-child(1)라는 선택자가 있을 시에, 형제 그룹 내의 모든 첫 번째<p>요소를 나타낸다는 것이다.
고로plate: nth-child(3)는 plate 중 3번째의 플레이트를 셀렉하는 것이 아닌, 전체 자식요소의 세번째이면서 플레이트 요소를 셀렉한다는 뜻이다.
내가 헷갈렸던 부분이 바로 이 부분이다 ㅠㅠ
✔ 📝 Level 19. 첫번째 벤토를 선택하시오 ( :nth-last-child(A) )
<div class="table"> <plate /> <bento /> <plate> <orange /> <orange /> <orange /> </plate> <bento /> </div>답: bento:nth-last-child(3)
:nth-last-child(A)도 18번 문제 개념과 비슷하나, last이므로 뒤에서 A번째의 해당하는 요소를 뜻한다.
A:nth-last-child(B)로 예를 들면, 형제자매관계에 놓여있는 전체 태그 중 뒤에서 B의 순서에 해당하는 요소인 A요소를 가리킴을 뜻한다.
📝 즉, 이 문제에서는 벤토 중에서 뒤에서 세번째의 요소를 선택한다는 것이 아니라, 전체 자식요소 중 뒤에서 세 번째 요소인 벤토를 셀렉한다는 뜻이다.
(많은 사람들이 여기서 많이 헷갈리는 듯하다)
만약plate, plate, bento, plate순으로 배치가 되어있고, 마지막의 plate를 셀렉하고 싶다면,plate: nth-child(3)을 해도 아무것도 셀렉이 되지 않을 것이다. plate 중 3번째 순서를 가리키는 것이 아니기 때문이다. 전체 자식요소의 3번째는 bento이므로 틀린 답이 된다. 따라서,plate: nth-child(4)또는plate:nth-last-child(1)를 사용하여야 한다.
✔ Level 20. 첫 번째 사과를 선택하시오 (:first-of-type)
<div class="table"> <orange class="small" /> <apple /> <apple class="small" /> <apple /> <apple class="small" /> <plate> <orange class="small" /> <orange /> </plate> </div>답: apple:first-of-type
:first-of-type의사 클래스는 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 나타낸다.
문제에서 작은 사과나 오렌지가 아닌 큰 첫 번째의 사과를 선택하라 하였으므로 apple을 앞으로 잡아주고 제일 첫 요소를 뜻하는 first-of-type을 입력하여 준다.
✔ 📝 Level 21. 모든 짝수에 위치해있는 접시를 선택하시오 ( :nth-of-type(A) )
<div class="table"> <plate /> <plate /> <plate /> <plate /> <plate id="fancy" /> <plate /> </div>답: plate:nth-of-type(2n)
:nth-of-type(A)는 A를 위와 같이 함수형으로 바꿔서 사용할 수 있다.
예시로는,2n+1,2n,1와 같이 홀수, 짝수, 또는 숫자를 이용하여 사용할 수 있다.
📝 이 선택자는nth-child와는 다르게 plate 중 짝수번째 plate를 선택하는 것이다.
즉,A:nth-of-type(B)라고 가정하였을 때, A 중에서
B위치에 해당하는 요소를 의미하는 것이다.
예를 들어,plate, plate, bento, plate가 있고 홀수번째의 plate를 선택하라 하고,plate:nth-of-type(2n+1)을 한다면 전체 태그 중 1,4번째 plate가 선택된다. plate 중에서 1,3번째에 위치해 있기 때문이다.
문제에서 짝수에 위치한 그릇만 선택하라 하였으므로2n을 이용하여 셀렉하면 된다.
✔ 📝 Level 22. 세 번째부터 모든 2nd 접시를 모두 선택하시오 ( :nth-of-type(An+B) )
<div class="table"> <plate /> <plate> <pickle class="small" /> </plate> <plate> <apple class="small" /> </plate> <plate /> <plate> <apple /> </plate> <plate /> </div>답: plate:nth-of-type(2n+3)
위 문제와 동일하게:nth-of-type(함수형)을 이용하여 문제 풀기.
여기서, 2n+1이 아닌 이유는 1을 포함하지 않는 홀수이면서, 3번째 접시부터 셀렉을 해야하기 때문이다. 2n+1은 1,3,5,7 순으로 전체 홀수를 뜻함.
때문에 문제에서는 3번째 접시부터 시작하는 홀수를 선택하라하였으므로 n을 0부터 대입한 값이 3이 되는2n+3가 답이 된다.
따라서,2A+B에서 B는 시작지점을 뜻하게 되고, 2A는 B를 기점으로 후에 2n번째 요소 모두를 연속적으로 선택하게 된다.
✔ Level 23. 가운데 접시 위에 있는 사과를 선택하시오 (:only-of-type)
<div class="table"> <plate id="fancy"> <apple class="small" /> <apple /> </plate> <plate> <apple class="small" /> </plate> <plate> <pickle /> </plate> </div>답: apple.small:only-of-type 또는 plate apple:only-of-type
:only-of-type은 동일한 유형의 형제자매가 없는 요소를 나타낸다. 따라서 plate 태그 내에 유일한 apple 태그를 선택하거나, 유일하게 .small인 하나의 사과만 가지는 태그를 선택한다.
✔ Level 24. 마지막 사과와 오렌지를 선택하시오 (:last-of-type)
<div class="table"> <orange class="small" /> <orange class="small" /> <pickle /> <pickle /> <apple class="small" /> <apple class="small" /> </div>답: .small:last-of-type
오렌지와 사과 모두 클래스 small을 가지고 있으므로 그 중 마지막 요소를 선택하는 선택자는 위와 같다.
✔ Level 25. 비어있는 벤토를 선택하시오 (:empty)
<div class="table"> <bento /> <bento> <pickle class="small" /> </bento> <plate /> <bento /> </div>답: bento:empty
자식 요소가 없는 bento를 모두 선택
✔ Level 26. 큰 사과를 선택해라 ( :not(X) )
<div class="table"> <plate id="fancy"> <apple class="small" /> </plate> <plate> <apple /> </plate> <apple /> <plate> <orange class="small" /> </plate> <pickle class="small" /> </div>답: apple:not(.small)
:not(X)는 부정 선택기와 일치하지 않는 모든 요소를 선택한다.
=> 선택기"X"와 일치하지 않는 모든 요소를 선택
예를 들어,:not(#fancy)는id="fancy"가 아닌 모든 요소를 선택한다
div:not(:first-child)는 div 태그 중 첫 번째 자식요소가 아닌 모든 태그를 선택
:not(.big, .medium)요소는 클래스가 big이나 medium이 아닌 모든 태그를 선택
이처럼 괄호안에 1가지 이상의 type이 존재할 때는,로 구분 지어준다.
:not(.small)이 아닌 이유 => .small을 제외하고 모든 태그를 선택하게 되므로 접시도 선택되어짐
따라서, 접시가 선택 되어지지 않게 apple로 먼저 선정을 해준 다음에 해당 선택자를 써준다.
✔ Level 27. 누군가의 아이템을 선택하여라 ( [attribute] )
<div class="table"> <bento> <apple class="small" /> </bento> <apple for="Ethan" /> <plate for="Alice"> <pickle /> </plate> <bento for="Clara"> <orange /> </bento> <pickle /> </div>답: [for]
[attribute]: 특정 속성이 있는 모든 요소를 선택한다.
<span attribute="value">와 같이 속성은 요소의 태그 내부에 나타나며, 항상 값이 있는 것은 아니며 공백일 수 있다.
해당 문제에서 누군가 (ethan, alice, clo뭐시기) 의 아이템 모두'for'라는 속성을 가지고 있으므로, 해당 특성을 선택하여 주면 된다.
✔ Level 28. 누군가의 접시를 선택하여라 ( A[attribute] )
<div class="table"> <plate for="Sarah"> <pickle /> </plate> <plate for="Luke"> <apple /> </plate> <plate /> <bento for="Steve"> <orange /> </bento> </div>답: plate[for]
for 특성을 가진 plate 태그를 모두 선택
✔ Level 29. Vitaly 의 식사를 선택하여라 ( [attribute="value"] )
<div class="table"> <apple for="Alexei" /> <bento for="Albina"> <apple /> </bento> <bento for="Vitaly"> <orange /> </bento> <pickle /> </div>답: [for="Vitaly"]
[attribute="value"]: 특정 특성 값이 있는 모든 요소 선택
✔ 주의! ) 특성 선택자는 대소문자를 구분하므로 각 문자가 정확하게 일치해야 한다.
✔ Level 30. 'Sa'로 시작하는 이름의 항목을 선택하여라. ( [attribute^="value"] )
<div class="table"> <plate for="Sam"> <pickle /> </plate> <bento for="Sarah"> <apple class="small" /> </bento> <bento for="Mary"> <orange /> </bento> </div>답: [for^="Sa"]
[attribute^="value"]: 특정 문자로 시작하는 속성 값을 가진 모든 요소를 선택한다.
✔ Level 31. 'ato'로 끝나는 이름의 항목을 선택하여라. ( [attribute$="value"] )
<div class="table"> <apple class="small" /> <bento for="Hayato"> <pickle /> </bento> <apple for="Ryota" /> <plate for="Minato"> <orange /> </plate> <pickle class="small" /> </div>답: [for$="ato"]
[attribute$="value"]: 특정 문자로 끝나는 속성 값을 가진 모든 요소 선택
✔ Level 32. ''obb'가 포함된 이름의 음식을 선택하여라. ( [attribute*="value"] )
<div class="table"> <bento for="Robbie"> <apple /> </bento> <bento for="Timmy"> <pickle /> </bento> <bento for="Bobby"> <orange /> </bento> </div>답: [for*="obb"]
[attribute*="value"]: 원하는 위치에 특정 문자가 포함된 속성 값을 가진 모든 요소 선택
class, href 또는 src 속성과 같은 공통 패턴을 식별할 수 있는 경우 유용한 선택자이다.
ex)
img[src*="/details/"]는 이미지 중에서 소스가 디테일 폴더인 모든 요소를 선택한다.
[class*="heading"]라면, class="main-heading" 및 class="sub-heading"과 같이 class에 "heading"이 있는 모든 요소를 선택한다.
몇몇 문제에서 의문점을 가지게 되어 정리를 하게 되었던건데, 정리를 하면서 확실히 깊게 파고들 수 있었다. 그냥 게임으로만 접했을 때는 위의 제시어가 나오고 그걸 보면서 입력하다 보니 그냥 이런 선택자가 있구나~ 정도였는데, 생각보다 diner게임이 깊이 있게 알려주는 것이 많았다. 왜 이 답이 이렇게 되는지, 아니면 다른 방법도 있는지, 오답이라면 왜 이 답이 안되는지 등 여러 방면에서 생각해 볼 수도 있는 힘을 키울 수 있었던것같다. 끝!
👉참고 사이트
