고요빛물결

게임을 통한 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

89건

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

+
제목 글쓴이 날짜 조회
19-02-19 조회 1,361
19-02-19 조회 1,242
19-02-18 조회 1,283
19-02-18 조회 1,321
19-02-17 조회 1,183
19-02-17 조회 1,418
19-02-17 조회 1,281
19-02-16 조회 971
19-02-16 조회 1,259
19-02-16 조회 1,275
19-02-15 조회 1,175
19-02-14 조회 1,022
19-02-13 조회 1,003
19-02-12 조회 1,286
19-02-12 조회 1,246
19-02-11 조회 1,350
19-02-11 조회 1,057
19-02-11 조회 1,017
19-02-10 조회 1,099
19-02-10 조회 1,258
19-02-10 조회 1,325
19-02-09 조회 1,047
19-02-09 조회 1,169
19-02-08 조회 4,096
19-02-08 조회 1,372
19-02-08 조회 1,105
19-02-08 조회 1,316
19-02-08 조회 1,478
19-02-08 조회 1,326