CSS Diner 답안 (3/3)

 

Level 22

 

3번째부터 시작해서 2n번째 plate를 선택합니다.

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

:nth-of-type(2n+3){
}

span:nth-of-type(6n+2)은 두 번째 인스턴스에서 시작하여 스팬의 6번째 인스턴스를 모두 선택합니다.

 

---

Level 23

 

중간접시에 있는 apple를 선택하세요

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

plate .small:only-of-type {
}

 

:only-of-type는 해당 유형의 유일한 요소를 선택합니다.

p span:only-of-type은 p에서 유일한 스팬인 경우 p 내의 스팬을 선택합니다.

 

---

Level 24

 

 

마지막 번째 apple과 orange를 선택하세요

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

.small:last-of-type {
}

 

 

Level 25

 

비어있는 bentos를 선택하세요

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

bento:empty{
}

 

 

Level 26

 

 

big apples를 선택하세요

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

:not(.small, plate) {
} /* .small이 아니거나 plate가 아닌것 */

:not(.big, .medium)은 class="big" 또는 class="medium"이 없는 모든 요소를 선택합니다.

 

---

 

Level 27

 

 

누군가를 위한 items을 선택하세요

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

[for] {
}

[attribute] 해당 어트리뷰트가 들어있는 엘리먼트를 선택합니다.

a[href]는 href="hdef" 특성이 있는 모든 요소를 선택합니다.

 

---

 

Level 28

 

 

누군가를 위한 plates를 선택하세요

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

plate[for] {
}

 

input[disabled]는 disabled 속성을 가진 모든 input을 선택합니다.

 

---

 

Level 29

 

 

 

Vitaly의 meal을 선택하세요

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

 

[for="Vitaly"] {
}

input[type="checkbox"]는 모든 checkbox란 input 요소를 선택합니다.

 

---

Level 30

 

이름에 sa가 들어간 사람을 위한 items을 선택하세요

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

[for^="Sa"] {
}

 

---

 

Level 31

 

 

ato로 끝나는 이름을 위한 item을 선택하세요

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

[for$="ato"] {
}

Img[src$ =".jpg"]모든 이미지들중 끝에가 .jpg 인 이미지를 선택합니다.

 

 

---

Level 32

 

 

obb가 포함된 이름의 음식을 선택하세요

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

[for*="obb"] {
}