CSS Diner 22 ~ 32번

* 출처 : 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)

 

 

 

22)  문제 : Select every 2nd plate, starting from the 3rd

 

22) 해설 : 사과가 들어있는 접시(왼쪽에서 3번쨰, 5번째)에 css로 접근

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

//css
plate:nth-of-type(2n+3) {
}
//"2n+3"에서 "3"은 selecting을 시작하는 element이고 
//"2n"는 그 이후로 두번째 element 모두를 연속적으로 선택한다는 의미가 된다.

 

 

23)  문제: Select the apple on the middle plate

 

23) 해설 : class가 plate인 applie를 css로 접근

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

//css
plate .small:only-of-type {
]

 

 

24) 문제 : Select the last apple and orange

 

24) 해설 : 왼쪽을 기준으로 2번쨰 위치의 오렌지, 6번째 위치한 사과에 css로 접근

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


//css
.small:last-of-type {
}

 

 

25) 문제 : Select the empty bentos

 

25) 해설 : class가 bento 중 비어있는 곳에 css로 접근

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

//css
bento:empty {
}

 

 

26) 문제 : Select the big apples

 

26) 해설 : 왼쪽에서 두 번째, 세 번째 위치한 큰 사과들에 css로 접근

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

//css
:not(.small, plate) { //사과를 제외한 다른 값들이 없는 걸로 접근
}

 

 

27) 문제 : Select the items for someone

 

27) 해설 : Ethan, Alice, Clara가 이름이 있는 상품들에 css로 접근

//html
<div class="table">
	<bento>
    	<apple class="small"/>
    </bento>
    <apple for="Ethan"/>
    <plate for="Alice">
    	<pickle/>
    <plate/>
    <bento for="Clara">
    	<orange/>
    </bento>
    <pickle/>
</div>

//css
[for] {
}

 

 

28) 문제 : Select the plates for someone

 

28) 해설 : class가 plate에 이름이 붙여있는 값에 css로 접근

//html
<div class="table">
	<plate for="Sarah">
    	<pickle/>
    </plate>
    <plate for="Luke">
    	<apple/>
    </plate>
    <plate/>
    <bento for="Steve">
    	<orange/>
    </bento>
</div>

//css
plate[for] {
}

 

29) 문제 : Select Vitaly's meal

 

29) 해설 : 왼쪽에서 세 번째 위치한 Vitaly에 css로 접근

//html
<div class="table">
	<apple for="Alexei"/>
   	<bento for="Albina">
    	<apple/>
    </bento>
    <bento for="Vitaly">
    	<orange/>
    </bento>
    <pickle/>
</div>

//css
[for="Vitaly"] {
}

 

 

30) 문제 : Select the items for names that start with 'Sa'

 

30) 해설 : 'Sa'로 시작하는 값들에(왼쪽의 첫 번째, 두 번째) css로 접근

//html
<div class="table">
	<plate for="Sam">
    	<pickle/>
    </plate>
    <bento for="Sarah">
    	<apple class="small"/>
    </bento>
    <bento for="Mary">
    	</orange>
    </bento>
</div>

//css
[for^="Sa"] {
}

 

31) 문제 : Select the items for names that end with 'ato'

31) 해설 :  'ato'로 끝나는 값들에(왼쪽의 두 번째, 네 번째) css로 접근

//html
<div class="table">
	<apple class="small"/>
    <bento for="Hayato">
    	<pickle/>
    </bento>
    <apple for="Ryota"/>
    <plate for="Minato"
    	<orange/>
    </plate>
    <pickle/>
</div>

//css 
[for$="ato"] {
}

 

 

32) 문제 : Select the meals for names that contain 'obb'

 

32) 해설 :  'obb'값이 포함된 값들에(왼쪽의 첫 번째, 세 번째) css로 접근

//html
<div class="table">
	<bento for="Robbie">
    	<apple/>
    </bento>
    <bento for="Timmy">
    	<pickle/>
    </bento>
    <bento for="Bobby">
    	<orange/>
    <//bento>
</div>

//css 
[for*="obb"] {
}