CSS Dinner 헷갈린 문제 정리

🎯 Level 15. first-child

파란색 동그라미 친 가장 상단의 오렌지를 선택하는 문제다.
모를 땐 "mdn css first-child" 을 찾아본다.
확인해보니 '부모의 첫번째 자녀'가 아니라, '자녀 중의 첫번째'를 선택해야 한다.
즉, 부모tag를 선택하는게 아니라 자녀 tag를 선택해야 한다.

나: plate:first-child
정답: oranage:fisrt-child

🎯 Level 16 only-child

나:  plate:only-child
정답: plate :only-child

차이가 뭔지 알겠는가?
정답에는 plate와 :only-child 사이에 "space"가 들어가 있다.

이건 15번 문제를 보면 알 수 있는 내용이다.
space가 없다면 tag가 plate인 only-child를 선택하란 의미다.

즉, apple과 pickle이라는 태그 대신에 plate라는 태그가 사용됐다면 정답이 된다는 것이다.

<plate>
	<apple>     ----->  <plate>
    <apple />   ----->  <plate />
</plate>

반면, space가 있다면 plate라는 parent elements의 모든 only-child를 선택하란 의미이기 때문에 원하는 것 처럼 parent 태그 내의 해당 요소를 모두 선택할 수 있다.

n은 Index를 말하다보다. index는 0부터 시작한다.

👩‍💻 배운점

Hooray! 끝났다.

솔직히 html, css는 쉬우니까 대충 넘어가라는 이야기를 많이 들어서 좀 무시했던 경향이 있었는데, 지금은 마음을 다시 고쳐먹은 상태여서 '쉽더라고 차근히 하자'라는 생각으로 문제를 진지하게 임했다.

n번째 오는 요소들, n번째 child 등의 css문법들을 보니 추후 어떻게 box를 나누면 좀 더 효율적으로 css를 적용할 수 있을지 그 구조를 생각해 볼 수 있는 시간이었다.