CSS Diner 12~21번

* 출처 : https://flukeout.github.io/

CSS Diner

* 답안 참고

https://velog.io/@jaedie/CSS-Diner-%EC%99%84%EB%A3%8C%EB%8B%B5%EC%95%88%EC%9A%94%EC%A0%90%EC%A0%95%EB%A6%AC-13

CSS Diner 완료(답안/요점정리) (1/3)

 

 

 

12)  문제 : Select every apple that's next to a plate

 

12) 해설 : class가 plate인 접시 옆의 사과 두 개를 css로 접근

//html
<div class="table">
	<bento>
    	<apple class="small"/>
	</bento>
    <plate/>
    <apple class="small"/>
    <plate/>
    <apple/>
    <apple class="small"/>
    <apple class="small"/>
</div>

//css
plate + apple {
}

 

 

13)  문제: Select the pickles beside the bento

 

13) 해설 : class가 bento인 pickle 두 개를 css로 접근

//html
<div class="table">
	<pickle/>
    <bento>
    	<orange class="small"/>
    </bento>
    <pickle class="small"/>
    <pickle/>
    <plate>
    	<pickle/>
    </plate>
    <plate>
    	<pickle class="small">
    </plate>
</div>

//css
bento ~ pickle {
}

 

 

14) 문제 : Select the apple directly on a plate

 

14) 해설 : class가 plate인 접시 위의 사과에 css로 접근

//html
<div class="table">
	<plate>
    	<bento>
        	<apple/>
        </bento>
   	</plate>
    <plate>
    	<apple/>
    </plate>
    <plate/>
    <apple/>
    <apple class="small"/>
</div> 


//css
plate > apple {
}

 

 

15) 문제 : Select the top orange

 

15) 해설 : 3개로 쌓아올린 오렌지의 가장 윗 부분에 css로 접근

//html
<div class="table">
	<bento/>
    <plate/>
    <plate>
    	<orange/>
        <orange/>
        <orange/>
    </plate>
    <pickle class="small"/>
</div>

//css
orange:first-child {
}

 

 

16) 문제 : Select the apple and the pickle on the plates

 

16) 해설 : class가 plate인 사과와 피클에 css로 접근

//html
<div class="table">
	<plate>
    	<apple/>
    </plate>
   	<plate>
    	<pickle/>
    </plate>
    <bento>
    	<pickle/>
    </bento>
    <plate>
    	<orange>
        	<orange class="small"/>
        </orange>
   	</plate>
    <pickle/>
</div>    

//css
plate :only-child {
}

 

 

17) 문제 : Select the small apple and the pickle

 

17) 해설 : class가 small인 사과와 맨 오른쪽 피클에 css로 접근

//html
<div class="table">
	<plate id="fancy">
    	<apple class="small"/>
    </plate>
    <plate/>
    <plate>
    	<orange>
        	<orange class="small"/>
        </orange>
    </plate>
    <pickle class="small"/>
</div>

//css
.small:last-child {
}

 

 

18) 문제 : Select the 3rd plate

 

18) 해설 : 3번째 접시에 css로 접근

//html
<div class="table>
	<plate/>
    <plate/>
    <plate/>
    <plate id="fancy"/>
</div>

//css
plate:nth-child(3) {
}

 

19) 문제 : Select the 1st bento

 

19) 해설 : 왼쪽에서 두 번째 위치한 bento에 css로 접근

//html
<div class="table">
	<plate/>
    <bento/>
    <bento>
    	<orange/>
       	<orange/>
        <orange/>
    </bento>
    <bento/>
</div>

//css
bento:nth-last-child(3) {
}

//1. ":nth-last-child(3)"라고 하면 3번째 오렌지도 선택이 됨.
//2. "bento:nth-last-child(2)"라고 하면 틀림. 두번째 bento 이지만 모든 element들의 숫자로 보면 3번째.

 

 

20) 문제 : Select first apple

 

20) 해설 : 왼쪽에서 두 번째 위치한 사과를 css로 접근

//html
<div class="table">
	<plate/>
    <bento/>
    <bento>
    	<orange/>
       	<orange/>
        <orange/>
    </bento>
    <bento/>
</div>

//css
apple:first-of-type {
}

 

21) 문제 : Select everything on the plate

 

21) 해설 : 접시가 짝수에 위치한 경우들을 css로 접근

//html
<div class="table">
	<plate/>
    <plate/>
    <plate/>
    <plate/>
    <plate id="fancy"/>
    <plate/>
</div>

//css 
plate:nth-of-type(even) {
}