CSS 07 CSS Diner 게임②

12543 단어 css dinercss diner

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-child and last-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 .jpg image.
[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, like class="main-heading" and class="sub-heading"
[for*="obb"]

좋은 웹페이지 즐겨찾기