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

목차

 

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

https://flukeout.github.io/

CSS Diner

 

 

CSS Diner (Level 1 ~ Level 15)에 대한 글입니다.

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

 

Level 16

:only-child - plate에서 하나의 자식만 있는 것 선택하기

plate > :only-child

 

Level 17

:last-child - class가 small인 것 중 마지막 자식 선택하기

.small:last-child

 

Level 18

:nth-child(A) - 3번째 plate 선택하기

plate:nth-child(3)

 

Level 19

:nth-last-child(A) - 뒤에서 3번째인 요소 선택하기

bento:nth-last-child(3)

 

Level 20

:first-of-type - apple 중 첫번째 요소 선택하기

apple:first-of-type

 

Level 21

:nth-of-type(A) - 짝수번째 plate 선택하기

plate:nth-of-type(even)

 

Level 22

:nth-of-type(An+B) - 3번째 plate부터 2개 간격으로 plate 선택하기

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

 

Level 23

:only-of-type - plate에서 같은 요소가 없는 apple 선택하기

plate apple:only-of-type

 

Level 24

:last-of-type - class가 small인 것 중 마지막 요소 선택하기

.small:last-of-type

 

Level 25

:empty - 자식이 없는 bento 선택하기

bento:empty

 

Level 26

:not(X) - class가 small인 요소가 없는 apple 선택하기

apple:not(.small)

 

Level 27

[attribute] - for 속성을 가진 요소 선택하기

[for]

 

Level 28

A[attribute] - for 속성을 가진 plate 선택하기

plate[for]

 

Level 29

[attribute="value"] - for 속성을 가진 요소 중 값이 "Vitaly"인 것 선택하기

[for="Vitaly"]

 

Level 30

[attribute^="value"] - for 속성을 가진 요소 중 값이 "Sa"로 시작하는 것 선택하기

[for^="Sa"]

 

Level 31

[attribute$="value"] - for 속성을 가진 요소 중 값이 "ato"로 끝나는 것 선택하기

[for$="ato"]

 

Level 32

[attribute*="value"] - for 속성을 가진 요소 중 값에 "obb"가 들어가는 것 선택하기

[for*="obb"]