게임을 통한 CSS Selector 연습 정보
게임을 통한 CSS Selector 연습
본문
@웹학교 님이 올려주신 https://sir.kr/cm_free/1499973 소모임에 정리해 봅니다.
https://github.com/flukeout/css-diner
16번, 17번, 19번은 좀더 봐야겠네요.
16번은
자식이 only-child로
17번은 검색을 해보니 여러가지 답이 가능하지만, last-child로만으로 되네요..
19번: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child
앞에 나오는 엘레먼트가 무조건 마지막에 있어야 되고.. 중간에 같은 엘레먼트가 아니어도 카운트는 됨.
시간이 되면 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
이것 기준으로 몇가지 더 추가하면 좋을 것 같습니다.
추천
0
0
댓글 5개
15번은 정확한 답을 위해 아래와 같이 되어야 될것 같습니다.
<bento/>
<plate />
<plate>
<orange />
<orange />
<orange />
</plate>
<bento>
<orange />
<orange />
</bento>
<pickle class="small" />
bento위에 orange 2개는 안올라가네요(한개만 보임)
<bento/>
<plate />
<plate>
<orange />
<orange />
<orange />
</plate>
<bento>
<orange />
<orange />
</bento>
<pickle class="small" />
bento위에 orange 2개는 안올라가네요(한개만 보임)
18번은
<plate>
<orange/>
<orange/>
</plate>
<bento>
<orange/>
<orange/>
</bento>
<plate id="fancy"/>
이런 구성으로 해서 plate아래 orange중하나 선택하게
<plate>
<orange/>
<orange/>
</plate>
<bento>
<orange/>
<orange/>
</bento>
<plate id="fancy"/>
이런 구성으로 해서 plate아래 orange중하나 선택하게
18번과 19번은 :nth-child(3)와 :nth-last-child(3) 같은 형식인데 nth-last-child의 앞에 마지막 엘리먼트가 꼭 붙어야 되네요.
24번은 every가 중요하네요
29번은
<apple for="Alexei" />
<bento for="Albina"><apple /></bento>
<bento for="Vitaly"><orange/></bento>
<plate for="Vitaly"><orange/></plate>
<pickle/>
이렇게 해야...
<apple for="Alexei" />
<bento for="Albina"><apple /></bento>
<bento for="Vitaly"><orange/></bento>
<plate for="Vitaly"><orange/></plate>
<pickle/>
이렇게 해야...