CSS Diner?

🤔 문제 링크 : CSS Diner

CSS Selector에 대해 연습할 수 있는 사이트

---

📑 답안

🍽️ 단계 1 : plate

🍽️ 단계 2 : bento

🍽️ 단계 3 : #fancy

📌 참고자료
디지털노마드 클래스(class)와 아이디(id)의 차이점

• id : id를 지칭할 경우 #(샾)을 사용한다.
• class : class를 지칭할 경우 .(점)을 사용한다.

🍽️ 단계 4 : plate > apple

🍽️ 단계 5 : #fancy > pickle

🍽️ 단계 6 : .small

🍽️ 단계 7 : orange.small

🍽️ 단계 8 : bento > orange.small

🍽️ 단계 9 : plate, bento

🍽️ 단계 10 : *

🍽️ 단계 11 : plate *

🍽️ 단계 12 : plate + apple

📌 참고자료
MDN 인접 형제 결합자

• 인접 형제 결합자(+)는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택한다.

🍽️ 단계 13 : bento ~ pickle

📌 참고자료
MDN 일반 형제 결합자

• 일반 형제 결합자(~)는 두 개의 선택자 사이에 위치하도록 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택한다.
• 두 요소가 서로 붙어있을 필요는 없다.
  

🍽️ 단계 14 : plate > apple

🍽️ 단계 15 : plate > :first-child

🍽️ 단계 16 : plate :only-child

🍽️ 단계 17 : .small:last-child

🍽️ 단계 18 : :nth-child(3)

• 앞에서 3번 선택
  

🍽️ 단계 19 : bento:nth-last-child(3)

• bento태그를 기준으로 뒤에서 3번을 선택한다.
  

🍽️ 단계 20 : apple:first-of-type

• apple태크의 첫 번째 type을 선택한다.
  

🍽️ 단계 21 : :nth-of-type(even)

• even : 짝수 type만 선택한다.
• odd : 홀수 type만 선택한다.
  

🍽️ 단계 22 : :nth-of-type(2n+3)

참고 자료
MaCoder [CSS] :nth-child :nth-of-type 가상 클래스(의사 클래스)

• An + B : A와 B는 정수 입력, n은 0부터 시작하는 양의 정수를 순서대로 대입한다.
• 즉, A * n + B로 계산한 값이 대입된다.
• 2 * 0 + 3 = 3 3번 선택 → 2 * 1 + 3 = 5 5번 선택
  

🍽️ 단계 23: plate apple:only-of-type

🍽️ 단계 24 : .small:last-of-type

🍽️ 단계 25 : bento:empty

• 자식이 없는 요소들만 선택한다.

🍽️ 단계 26 : apple:not(.small)

• apple태그에서 .small이 없는 요소만 선택한다.

🍽️ 단계 27 : [for]

• 속성값이 for인 것만 선택한다.

🍽️ 단계 28 : plate[for]

🍽️ 단계 29 : bento[for="Vitaly"]

🍽️ 단계 30 : [for^="Sa"]

• 속성이 for이면서 속성값이 Sa로 시작하는 것만 선택한다.

🍽️ 단계 31 : [for$="ato"]

• 속성이 for이면서 속성값이 ato로 끝나는 것만 선택한다.

🍽️ 단계 32 : [for*="obb"]

• 속성이 for이면서 obb가 포함된 것만 선택한다.

🍽️ finish~

---

🗓️ 수정 및 추가

✅ 2022.02.03

• 단계 13 ~ 21 추가
• 단계 22 ~ 31(마지막) 추가

✅ 2022.02.26

• 썸네일 변경