게임을 통한 CSS Selector 연습

@웹학교 님이 올려주신 https://sir.kr/cm_free/1499973 소모임에 정리해 봅니다. 

 

http://flukeout.github.io/

 

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

 

이것 기준으로 몇가지 더 추가하면 좋을 것 같습니다.

|

댓글 5개

15번은 정확한 답을 위해 아래와 같이 되어야 될것 같습니다.
<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중하나 선택하게
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/>
이렇게 해야...
댓글을 작성하시려면 로그인이 필요합니다. 로그인

CSS

CSS 관련 공부 및 자료 공유 소모임 게시판 입니다.

+
제목 글쓴이 날짜 조회
6년 전 조회 1,314
6년 전 조회 2,704
6년 전 조회 1,473
6년 전 조회 1,370
6년 전 조회 1,042
6년 전 조회 2,268
6년 전 조회 1,292
6년 전 조회 1,206
6년 전 조회 1,026
6년 전 조회 1,392
6년 전 조회 942
6년 전 조회 1,127
6년 전 조회 1,011
6년 전 조회 1,333
6년 전 조회 1,837
6년 전 조회 1,295
6년 전 조회 1,217
6년 전 조회 1,491
6년 전 조회 1,355
6년 전 조회 1,027
6년 전 조회 1,485
6년 전 조회 880
6년 전 조회 816
6년 전 조회 765
6년 전 조회 1,046
6년 전 조회 992
6년 전 조회 938
6년 전 조회 979
6년 전 조회 1,009
6년 전 조회 887
🐛 버그신고