[CSS] CSS Dinner 정답 공유 (11-20)

CSS Dinner를 통해 CSS Selecter를 재밌게 학습할 수 있습니다.

복습하기 위해 블로그에 다시 정리합니다~.~

 

https://flukeout.github.io/

CSS Diner

 

 

✅ Level 11

HTML

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

CSS

plate * {
}

 

 

✅ Level 12

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 {
}

 

 

✅ Level 13

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 {
}

 

 

✅ Level 14

HTML

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

CSS

plate > apple {
}

 

 

✅ Level 15

HTML

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

CSS

orange:first-child {
}

 

 

✅ Level 16

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 {
}

 

 

✅ Level 17

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 {
}

 

 

✅ Level 18

HTML

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

CSS

:nth-child(3) {
}

 

 

✅ Level 19

HTML

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

CSS

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

 

 

✅ Level 20

HTML

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

CSS

apple:first-of-type {
}