CSS 선택자를 확인해볼 수 있는 재밌는 게임!
단계는 Level 1 ~ 32까지 있으며
선택자가 시각적으로 바로 확인할 수 있기 때문에 재밌고 이해가 잘 되는 것 같음!
https://flukeout.github.io/
17. :last-child | Last Child Pseudo-selector
- 마지막 요소만 선택하는 것
- 위 예시에서 그냥 :last-child 하면 사과, 큰 배, 피클 선택됨
- fancy plate 의 apple과 table 의 pickle만 선택하기 위해서 일단 공통점을 class="small"이라는 것 발견해야 함
- 그 small이라는 apple과 pickle을 선택해야 하므로 답은
.small:last-child - 주의할 점
.small :last-child 이렇게 공백을 넣어버리면 small이라는 클래스의 last-child를 선택하겠다는 말이 되므로 틀린 것! (small을 선택하겠다는 말이 아니게 되는 것) - Pro Tip → In cases where there is only one element, that element counts as the
first-child,only-childandlast-child!
.small:last-child
18. :nth-child(A) | Nth Child Pseudo-selector
- 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식 요소 모두 선택
- 세 번째 plate를 선택해야 함
둘 다 가능
:nth-child(3) plate:nth-child(3)
19. :nth-last-child(A) | Nth Last Child Selector
- bento를 선택할 건데 뒤에서부터 3번째에 있는 bento
- nth-last-child(2n) -> 뒤에서부터 2,4,6 ..번째 요소 모두
bento:nth-last-child(3)
20. :first-of-type | First of Type Selector
- 모든 자식(child) 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소 모두 선택
- 첫 번째 사과를 선택
apple:first-of-type
- 주의할 점
맨 처음 등장하는 요소가 여러 개면 다 적용
밑에서 보면 first-of-type에 해당하는게 🔴 2개이므로 다 적용
<head>
<meta charset="UTF-8">
<title>CSS Structural Selectors</title>
<style>
div.first{ border: 3px solid #008000; }
div.second{ border: 3px solid #FFD700; }
p:first-of-type {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h1>:first-of-type을 이용한 선택</h1>
<div class="first">
🔴<p>이 p 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 p 태그입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
<div class="second">
🔴<p>이 p 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 p 태그입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
</div>
</div>
</body>21. :nth-of-type(A) | Nth of Type Selector
- 2,4,6 plate를 선택해야 함
- (A)에 숫자를 넣어도 되고 2n, 3n 같은 패턴을 넣어도 됨
- plate:nth-of-type(2n) : 2의 배수 모두
둘 다 가능
plate:nth-of-type(2n) :nth-of-type(2n)
22. :nth-of-type(An+B) | Nth-of-type Selector with Formula
- :nth-of-type(An+B) : A의 배수를 선택할건데, B에서부터 시작할 것(B포함)
둘 다 가능
plate:nth-of-type(2n+3) :nth-of-type(2n+3)
23. :only-of-type | Only of Type Selector
- 특정 타입의 요소 단 하나만을 가지는 요소의 자식(child) 요소를 모두 선택
- :only-of-type 그냥 이것만 칠 경우 하나만 있는 apple과 하나만 있는 pickle이 선택됨
apple:only-of-type
24. :last-of-type | Last of Type Selector
- 다른 태그 안에 있는 것들을 고를 때는 공통점을 찾아보자. 위에서는 class가 같기 때문에 그걸 이용!
.small:last-of-type
25. :empty | Empty Selector
- 자식(child) 요소를 전혀 가지고 있지 않은 요소를 모두 선택
- 위에서 그냥 :empty를 하면 빈 bento, bento안의 pickle, 빈 plate, 빈 bento가 선택된다
bento:empty
26. :not(A) | Negation Pseudo-class
- small이라는 클래스가 아닌 apple을 선택
- :not(A) : A가 아닌 것을 선택하라는 말, 여집합 느낌
ex) :not(.small) : small이라는 클래스가 아닌 것!
apple:not(.small)
27. [attribute] | Attribute Selector
- attribute(속성) 선택하기
- [속성이름]
- class나 id는 .이나 # 뒤에 그 값을 불러왔다면, attribute는 값이 아닌 그 속성이름을 불러옴
[for]
28. A[attribute] | Attribute Selector
- A[attribute] : A라는 태그 안의 attribute 속성을 불러오겠다
plate[for]
29. [attribute="value"] | Attribute Value Selector
- 속성의 값으로 불러오기
둘 다 가능
[for="Vitaly"] bento[for="Vitaly"]
30. [attribute^="value"] | Attribute Starts With Selector
- value로 시작하는 요소 모두 선택. 시작하기만 하면 됨
- 대소문자 구별해줘야 함
- 단어 2개 이상이거나 -으로 연결되어 있어도 가능
- "first" 를 찾는데 "first-p" 가능
[for^="Sa"]
31. [attribute$="value"] | Attribute Ends With Selector
- value로 끝나는 요소 모두 선택. 끝나기만 하면 됨
- 대소문자 구별해줘야 함
img[src$=".jpg"]selects all images display a.jpgimage.
[for$="ato"]
32. [attribute*="value"] | Attribute Wildcard Selector
- value를 포함하는 요소 모두 선택
img[src*="/thumbnails/"]selects all image elements that show images from the "thumbnails" folder.[class*="heading"]selects all elements with "heading" in their class, likeclass="main-heading"andclass="sub-heading"
[for*="obb"]
개발자로서의 삶은 https://velog.io/@maxminos 에서 기록하고 있습니다 😀