[CSS] CSS Diner - CSS Selector 연습하기 (Level 1 ~ Level 15)

목차

 

CSS Selector에 대해 연습할 수 있는 곳입니다.

https://flukeout.github.io/

CSS Diner

 

CSS Diner (Level 16 ~ Level 32)에 대한 글입니다.

[CSS] CSS Diner - CSS Selector 연습하기 (Level 16 ~ Level 32)

 

Level 1

A - 모든 plate 선택하기

plate

 

Level 2

A - 모든 bento box 선택하기

bento

 

Level 3

#id - id가 fancy인 plate 선택하기

#fancy

 

Level 4

A B - plate에 있는 apple 선택하기

plate apple

 

Level 5

#id A - id가 fancy인 plate에 있는 pickle 선택하기

#fancy pickle

 

Level 6

.classname - class가 small인 사과 선택하기

.small

 

Level 7

A.className - orange 중에서 class가 small인 것 선택하기

orange.small

 

Level 8

bento 안에 있는 orange 중에서 class가 small인 것 선택하기

bento orange.small

 

Level 9

A, B - 모든 plate, bento 선택하기

plate, bento

 

Level 10

* - 모든 것 선택하기

*

 

Level 11

A * - plate 위의 모든 것 선택하기

plate *

 

Level 12

A + B - plate 바로 뒤에 위치하는 apple 선택하기

plate + apple

 

Level 13

A ~ B - bento 뒤에 오는 모든 pickle 선택하기

bento ~ pickle

 

Level 14

A > B - plate의 직계 자식이 apple인 것을 선택하기

plate > apple

 

Level 15

:first-child - orange 중 첫 번째 자식 선택하기

orange:first-child