목차
CSS Selector에 대해 연습할 수 있는 곳입니다.
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
CSS Diner (Level 1 ~ Level 15)에 대한 글입니다.
[CSS] CSS Diner - CSS Selector 연습하기 (Level 1 ~ Level 15)
목차 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io Level 1 plate Level 2 bento Level 3 #fancy Level 4 plate apple Level 5 #fan..
howbeautifulworld.tistory.com
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"]
'HTML&CSS > CSS' 카테고리의 다른 글
[CSS] CSS Diner - CSS Selector 연습하기 (Level 1 ~ Level 15) (0) | 2021.06.30 |
---|---|
[CSS] Flexbox Froggy - CSS Flexbox Layout 배우기 게임 (1) | 2021.06.30 |
[CSS] Flexbox Defense - CSS Flexbox Layout 배우기 게임 (0) | 2021.06.30 |
[CSS] Grid Garden - CSS Grid Layout 배우기 게임 (0) | 2021.06.30 |
댓글