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

Level 11: Combine the Universal Selector

Level11 에서는 Universal selector를 다른 selector와 결합해서 사용하는 연습이다. 접시 위 올라가 있는 모든것들을 선택해야한다.

HTML CODE

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

CSS CODE

plate *{
}

Level 12: Adjacent Sibling selector

Level12 에서는 특정 element 뒤에 바로 따라오는 siblings들을 선택할 수 있는 selector이다. 여기서 siblings란 A element 뒤에 바로 따라오는 B element를 A element의 sibling 이라고 한다. 단, 두 element는 같은 level 과 depth를 가지고 있어야 한다. sibling을 선택하기 위해서 "+"를 사용한다.

HTML CODE

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

CSS CODE

plate + apple{
}

Level 13: General Sibling selector

Level13 에서는 A라는 element 이후로 존재하는 sibling 모두를 선택하는 selector를 배운다. Adjacent sibling selector와 다른점이라면 A 뒤에 오는 하나의 element를 선택하는 것이 아니라, 선언된 종류의 sibling element 모두를 선택한다는 것이다. 여기서 CSS method는 "A ~ B" 인데 A를 포함하지 않는다.

HTML CODE

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

CSS CODE

bento ~ pickle {
}

Level 14: Child selector

Level14에서는 parents element에 속해 있는 child element를 바로 선택할 수 있는 selector의 문제이다. 접시 위 홀로있는 사과녀석 하나를 선택하면 된다.

HTML CODE

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

CSS CODE

plate > apple {
}

Level 15: First Child Pseudo-selector

Level 15에서는 parent element에 nesting 되어있는 첫번째 child element를 선택하는 selector를 공부한다. 이 selector 사용시 주의점은 해당 method가 "A:first-child"의 형식인데, 여기서 A는 직접적으로 우리가 선택하고자는 element가 되는것이지, parents element 아니다. 우리는 nesting 되어있는 오렌지들 중 첫번째 순에 있는 orange를 선택하여 함으로 method는 "orange"로 시작하여야 할 것이다.

HTML CODE

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

CSS CODE

orange:first-child {
}

Level 16: Only Child Pseudo-selector

Level16에서는 parents element에 nesting 되어 있는 child elements들 중 독자(only child)인 녀석들만 선택할 수 있는 selector를 공부한다. 해당 method는 ":only-child"인데 여기서 주의할 점이 있다. A:only-child 라고 selector를 선언하면 "only child 인 모든 A element를 선택한다"는 뜻이 된다. 하지만 만약 A :only-child 와 같이 "A"와 ":" 사이에 space가 있다면 "A라는 parents elements들의 모든 only-child element를 선택한다"는 의미이다.

HTML CODE

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

CSS CODE

plate :only-child {
}

Level 17: Last Child Pesudo-selector

Level17에서는 parents element에 nesting된 child element 중 마지막 element (last child)를 선택하는 selector에 대해서 공부한다. 주의할 점은 만약 nesting 되어있는 child element가 하나라면 해당 element는 first-child 이자 only-child 이며 last-child가 된다.

HTML CODE

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

CSS CODE

.small:last-child {
}

Level 18: Nth Child Pseudo-selector

Level18 에서는 n번째에 위치한 element 선택할 수 있는 selector 공부한다. 위 이미지에서 보다시피 3번째 접시를 선택해야 한다. 주의할 점은 예를들어 "A:nth-child(B)" 일때 A라는 element 중 B번째에 있는 element를 선택한다는 뜻이라는 것이다. 만약 A를 선언하지 않는다면 모든 element들 중 B번째를 선택하게 될것이다.

HTML CODE

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

CSS CODE

:nth-child(3) {
}

Level 19: Nth Child Pseudo-selector

Level19에서는 :nth-child()와 비슷하지만 카운팅 방향이 위에서 부터가 아니라 아래에서 부터인 nth-last-child() selector를 공부한다. 주의할 점은 :nth-child() 를 선언할때
1. ":nth-last-child(3)"라고 하면 3번째 오렌지도 선택이 됨.
2. "bento:nth-last-child(2)"라고 하면 틀림. 두번째 bento 이지만 모든 element들의 숫자로 보면 3번째.
그러므로 꼭 "bento:nth-last-child(3)"라고 선언을 해야 오렌지를 제외하고 뒤에서 3번째에 있는 bento를 선택할 수 있음.

HTML CODE

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

CSS CODE

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

Level 20: First of Type selector

Level20에서는 nesting된 element, class, id 중 원하는 type를 선택하는 selector인데, 그중 첫번째 자리에 위치한 녀석을 선택하는 selector를 공부한다.

HTML CODE

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

CSS CODE

apple:first-of-type{
}

Level 21: Nth of Type selector

Level21 에서는 nth 자리에 위치한 type별로 선택할 수 있는 selector를 공부한다. 해당 method는 :nth-of-type(A) 인데 A에는 1, 2, 3 과 같이 순서를 나타내는 integer 외에도 even 혹은 odd 와 같이 패턴을 나타는 argument를 넣는 것도 가능한다.

HTML CODE

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

CSS CODE

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

다음편에서 계속...