CSS Selectors 게임으로 공부하기

테루·2020년 12월 23일
0

CSS

목록 보기
1/5
post-thumbnail

게임으로 배우는 Css Selectors

CSS Selector를 공부하려고 생활코딩을 보는 도중 게임으로 Selectors를 공부할 수 있는 사이트를 발견했다

CSS Diner!!

위의 게임은 Css 선택자를 공부하기 위해 깃허브에 올라와 있는 자료이다!
선택자를 사용하여 위의 접시를 선택하면 되는 아주 간단한 게임이다.
총 32단계로 되어있고 난이도는 조금만 생각하면 모두 해낼 수 있을 정도로 간단하다
저도 됬으니 여러분은 거저먹으실 겁니다ㅎㅎ....

1,2 .A
기본 element를 선택

3. ID선택자
 #fancy
 
4,5.하위 선택자
plate apple
(plate안에 있는 apple를 선택)

6. class선택자
.small
(small이라는 클래스를 가지고있는 element선택)

7. class 선택기 결합
orange.small
(small클래스를 가지고 있는 orange를 선택)

9. 조합 선택자
A,B
(A와B 둘다 선택)

10.전체 선택자
*
(HTMl안에 모든 걸 선택)

11. 조합 선택자 응용
plate>*
(plate안에 있는 모든 요소 선택)

12. 인접선택자
plate + apple
(plate바로 옆에 있는 apple을 선택)

13.형제 선택자
bento~pickle
(bento뒤에있는 모든 pickle을 선택)

14. 자식 선택자
plate>apple
(plate바로 안에 있는 apple을 선택)


--pseudo class selector(가상 클래스 선택자)

15. :first-child
orange:first-child
형제요소중 첫번째 orange

16.:only-child
plate>:only-child
plate안에 유일한 요소를 선택
(plate안에 요소가 하나만 있어야됨)

17. :last-child
A:last-child
(A에서 가장마지막요소를 선택)

18. :nth-child()
plate:nth-child(3)
형제의 목록에서 3번째 plate선택

19. :nth-last-child()
plate:nth-last-child(3)
형제의 목록에서 뒤에서 3번째
(기준이 맨 뒤에서 부터 시작)

20. :first-of-type
apple:first-of-type
(다른 요소들안에서 가장 처음에 위치한 apple 선택)

21. :nth-of-type()
plate:nth-of-type(2n)
(짝수의 plate를 선택)

22. nth-of-type(An+B)
plate:nth-of-type(2n+3)

23. :only-of-type
plate apple:only-of-type
plate안에 하나만 존재하는 apple를 선택
(apple이 여러개가 있으면 선택이 되지않는다)
EX) 
<div>
<plate/>
<plate/>
<apple/>
</div>
여기서 div:only-of-type이라고 하면 하나만 있는 apple가 선택이 된다.

24. :last-of-type
orange:last-of-type
(orange 요소중에 가장 마지막에 있는 orange를 선택)
같은 유형중에 가장 마지막에 있는 것을 선택한다

25. :empty
bento:empty
(자식이 전혀 없는 bento를 선택)

26. :not(A)
apple:not(.small)
클래스 small을 가지고 있지 않은 apple를 선택
()안에는 Id class등 선택자가 들어갈 수 있다

27. [attribute]
[for]
for속성을 가지고 있는 요소를 선택한다
EX)
input[disabled]
disabled 속성을 가지고 있는 input을 선택한다

29. [attribute="value"]
bento[for = "Vataly"]
for = "Vataly"속성을 가지고 있는 bento를 선택한다

30. [attribute^="value"]
[for^="Sa"]
Sa로 시작하는 for속성을 가지고 있는 요소를 선택한다

31. [attribute$="value"]
[for$="ato"]
ato로 끝나는 for속성을 가지고 있는 요소를 선택한다.

32. [attribute*="value"]
[for*="obb"]
obb를 포함하고 있는 속성for를 선택한다
profile
아직은 달걀안의

0개의 댓글