CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
최근 React Native를 공부하고 있는데요, 이를 위해서 HTML과 CSS도 공부 중입니다.
공부를 하다보니 생활코딩 님의 강의에서 위 링크의 게임을 추천받았는데요, CSS의 선택자를 연습하기 좋은 게임이라고 합니다.
저도 공부하는 입장에서 위 링크에 들어가서 문제를 풀어보았는데요, 위 게임에 나오는 선택자들을 한 번 정리해보았습니다.
정리하면서 아래 문서를 참고했습니다.
www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements
www.w3schools.com
1. #id
ex) #example
id="example"인 요소를 선택합니다.
2. A B
ex) div p
div 요소 안에 있는 p 요소를 선택합니다.
3. #id A
ex) #example p
id="example"인 요소 안에 있는 p 요소를 선택합니다.
4. .classname
ex) .example
class="example"인 요소를 선택합니다.
5. A.classname
ex) p.example
p 태그 안에 있는 요소들 중 class="example"인 요소를 선택합니다.
6. A, B
ex) div, p
모든 div와 p 요소들을 선택합니다.
7. *
모든 요소들을 선택합니다.
8. A *
ex) div *
div 태그 안에 있는 모든 요소들을 선택합니다.
9. A+B
ex) div+a
div 요소 바로 뒤에 붙는 a 요소 하나를 선택합니다.
10. A~B
ex) div~a
div 요소 뒤에 붙는 모든 a 요소를 선택합니다.
11. A>B
ex) div>a
div 요소의 직접적인 자식인 a 요소를 선택합니다.
12. :first-child
ex) p:first-child
p 태그의 첫 번째 자식 요소를 선택합니다.
ex) :first-child
모든 첫 번째 자식 요소를 선택합니다.
13. :only-child
ex) span:only-child
span 요소 중 유일한 자식인 span 요소들만 선택합니다.
14. :last-child
ex) span:last-child
span 요소의 마지막 자식 요소를 선택합니다.
15. :nth-child(A)
ex) p:nth-child(3)
부모의 3번째 자식 요소인 p 태그를 선택합니다.
ex) :nth-child(8)
부모의 8번째 자식 요소들을 모두 선택합니다.
16. :nth-last-child(A)
ex) p:nth-last-child(3)
부모에서 3번째 요소인 p 태그를 모두 선택합니다.
17. :first-type-of
ex) span:first-type-of
모든 요소들 중 첫 번째로 나오는 span 요소를 선택합니다.
18. :nth-of-type(A)
ex) div:nth-of-type(2)
div의 두 번째 요소를 선택합니다.
ex :nth-of-type(even)
전체 요소의 짝수 번째 요소를 선택합니다.
19. :nth-of-type(An+B)
ex) span:nth-of-type(6n+2)
span의 요소 중 2에서 시작해서 6씩 증가하는 번째 수 요소를 선택합니다. (2, 8, 14, 20, ...번째 요소 선택)
20. :only-of-type
ex) p:only-of-type
부모의 자식들 중 유일한 p 요소인 p 요소를 선택합니다.
21. :last-of-type
ex) div:last-of-type
모든 요소들 중 마지막에 있는 div 요소들 모두를 선택합니다.
22. :empty
ex)div:empty
div 중 비어 있는 모든 div를 선택합니다.
23. :not(X)
ex) div:not(#fancy)
모든 div 중 id=fancy가 아닌 div를 선택합니다.
24. [attribute]
ex) a[href]
모든 a 중 href를 가지고 있는 a를 선택합니다.
25. [attribute="value"]
ex) input[type="checkbox"]
모든 input 중 type="checkbox"인 input을 선택합니다.
26. [attribute^="value"]
ex) .toy[category^="Swim"]
class="toy"인 요소 중 category 속성이 Swim으로 시작하는 것들을 선택합니다.
27. [attribute$="value"]
ex) img[src$=".jpg"]
img 요소 중 src 속성이 .jpg로 끝나는 것들을 선택합니다.
28. [attribute*="value"]
ex) img[src*="/thumbnails/"]
img 요소 중 src 속성 중간에 /thumbnails/를 포함하는 것들을 선택합니다.
작성한 내용 중 오류 사항이나 보완 사항 있으면 댓글로 남겨주시면 감사드리겠습니다 :)
'컴퓨터 언어 > HTML, CSS' 카테고리의 다른 글
| Sass(Scss) 정리 (0) | 2021.12.18 |
|---|---|
| [CSS] Flexbox 속성 정리 (0) | 2020.12.13 |