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

Level 22: Nth-of-type selector with Formula

Level22 에서는 어느 한 element의 위치를 시작으로 n번째 element를 연속적으로 선택할 수 있는 selector에 대해서 공부한다. 위 그림에서 표시된 3번째 접시를 포함하는 기점으로 그 다음, 다음 element를 연속적으로 선택하는 method를 선언하면 된다.

HTML CODE

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

CSS CODE

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

"2n+3"에서 "3"은 selecting을 시작하는 element이고 "2n"는 그 이후로 두번째 element 모두를 연속적으로 선택한다는 의미가 된다.

Level 23: Only of Type selector

level 23에서는 parent element내에서 '유일한'type을 selecting하는 selector를 공부한다.

HTML CODE

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

CSS CODE

plate .small:only-of-type {
]

Level 24: Last of Type selector

Level24 에서는 한 type내에서 가장 마지막에 위치한 element를 선택하는 selector에 대해서 공부한다. 여기서 말하는 type은 tag의 종류라고 생각하면 된다. 예를 들어 p태그와 span태그는 서로 다른 type이라고 할 수 있겠다.

HTML CODE

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

CSS CODE

.small:last-of-type {
}

Level 25: Empty selector

Level25 에서는 child element가 하나도 없는 텅빈 element 모두를 선택할 수 있는 selector를 배운다.

HTML CODE

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

CSS CODE

bento:empty{
}

Level 26: Negation Pseudo-class

Level26 에서 학습하는 CSS selector는 :not(x)인데, 해당 selector는 'x'를 제외한 모든 나머지 element를 선택하게 된다. 여기서 주의할 점은 괄호안에 1가지 이상의 type이 존재할때는 ','로 나눠줘야 한다.

HTML CODE

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

CSS CODE

:not(.small, plate) {
}

Level 27: Attribute selector(1)

Level27 에서는 attribute(특성)을 이용한 selector를 배운다. 해당 문제에서는 element 3개가 'for'라는 특성을 공통적으로 가지고 있으므로, 해당 특성을 선택해 3개 element를 모두 선택한다.

HTML CODE

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

CSS CODE

[for] {
}

Level 28: Attribute selector(2)

Level28 에서는 특성을 이용한 selector를 계속해서 학습한다. 이전 레벨에서는 한 특성을 공유하는 모든 element를 선택했다면, 이번에는 어떠한 element type을 특정화하여 그 type내에서 한 특성을 공유하는 element들을 모두 선택할 수 있는 selector를 학습한다.

HTML CODE

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

CSS CODE

plate[for] {
}

Level 29: Attribute Value selector

Level29 에서는 특성이 가지근 고유의 value를 이용한 selector를 학습한다.

HTML CODE

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

CSS CODE

[for="Vitaly"] {
}

Level 30: Attribute Starts with selector

Level30 에서도 앞서 활용한 attribute의 value를 이용한 selector인데, 앞전과는 다르게 value를 전체를 적용하는 대신 value의 일부분을 이용해 value의 일부를 공통적으로 공유하는 모든 element를 선택할 수 있다.

HTML CODE

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

CSS CODE

[for^="Sa"] {
}

Level 31: Attribute Ends with selector

Level31 에서는 attribute value의 앞쪽 일부 대신 뒷쪽의 일부를 가지고 선택할 수 있는 selector를 학습한다.

HTML CODE

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

CSS CODE

[for$="to"] {
}

Level 32: Attribute Wildcard selector

마지막 Level 32에서는 특정 알파벳을 attribute value로 가지는 모든 element를 선택하는 selector를 학습한다.

HTML CODE

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

CSS CODE

[for*="bb"] {
}

-CSS Diner 끝-