CSS Diner

Level 1

plate

 

Level 2

bento

 

Level 3

#fancy

 

Level 4

plate apple

 

Level 5

#fancy pickle

 

Level 6

.small

 

Level 7

orange.small

 

Level 8

bento orange.small

 

Level 9

plate, bento

 

Level 10

*

 

Level 11

plate *

 

Level 12

plate + apple

 

Level 13

bento ~ pickle

 

Level 14

plate > apple

 

Level 15

orange:first-child

 

Level 16

plate > :only-child
plate :only-child

 

Level 17

.small:last-child

Pro Tip → In cases where there is only one element, that element counts as the first-child, only-child and last-child!

참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

 

-> :last-child를 선택하면 위의 그림을 선택하는 이유 

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

1. #fancy의 처음이자, 하나이자, 마지막 자식 요소인 apple.small이 선택됨.

2. plate의 마지막 자식 요소가 선택됨.

3.div.table의 마지막 자식 요소인 pickle.small이 선택됨.

 

찾아볼 것

pickle.small:first-child
pickle.small:only-child
pickle.small:last-child

1, 2번은 선택이 불가능하고 3번은 선택이 가능한 이유가 무엇일까?

-> div.table의 기준으로 pickle은 마지막 요소이다. 그러므로 pickle.small:last-child가 가능하다.

 

Level 18

plate:nth-child(3)

 

Level 19

bento:nth-last-child(3)

 

Level 20

apple:first-of-type

 

Level 21

plate:nth-of-type(even)
plate:nth-of-type(2n)

 

Level 22

plate:nth-of-type(2n+3)

 

Level 23

plate apple:only-of-type
plate .small:only-of-type

 

Level 24

.small:last-of-type

 

Level 25

bento:empty

 

Level 26

apple:not(.small)
:not(.small, plate)

 

Level 27

[for]

 

Level 28

plate[for]

 

Level 29

[for="Vitaly"]

 

Level 30

[for^="Sa"]

 

Level 31

[for$="ato"]

 

Level 32

[for*="obb"]