[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 35회차 미션

7 * 5 = 35, 5주째

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 35일차입니다!

오늘은 가상 클래스 선택자에 대하여 학습했습니다.

강의 클립이 5개나 있었지만! 씩씩하게 다 들었습니다. 💪

 

공부 내용 정리! 왼쪽은 transition 예제를 기억해두려고 찍은 것

오늘은 05~09. 가상 클래스 선택자 - hover, active, focus / first-child, last-child / nth-child / xxx-child 주의사항 / nth-of-type, not 을 공부했습니다.

---

<Today I Learned>

<가상 클래스 선택자 (Pseudo-Classes Selectors)>

<hover>

🔶 E에 마우스(포인터)가 올라가있는 동안에만 E 선택

🔷 E:hover

 

<active>

🔶 E를 마우스로 클릭하는 동안에만 E 선택

🔷 E:active

 

<focus>

🔶 E가 포커스된 동안에만 E 선택, 대화형 콘텐츠에서 사용 가능

🔷 E:focus

 

<first-child>

🔶 E가 형제 요소 중 첫번째 요소라면 선택

🔷 E:first-child

 

<last-child>

🔶 E가 형제 요소 중 마지막 요소라면 선택

🔷 E:last-child

 

<nth-child>

🔶 E가 형제 요소 중 n번째 요소라면 선택 (n 키워드 사용시 0부터 해석 (Zero-base)) (동일한 부모를 가짐)

🔷 E:nth-child(n)

 

🔷 E:nth-child(2n) : 2번째, 4번째, ... 등 짝수번째 요소

🔷 E:nth-child(n+3) : 3번째 요소부터 선택됨

 

✨ .fruits p:nth-child(1) { ... }

➡ 오른쪽에서 왼쪽으로 해석하면 더 정확함

 

✨ 조상클래스 :first-child { ... } : 태그 조건에서 자유로움

<nth-of-type>

🔶 E의 타입(태그 이름)과 동일한 타입인 형제 요소 E가 n번째 요소라면 선택 (n 키워드 사용시 0부터 해석 (Zero-base))

🔷 E:nth-of-type(n)

 

<부정 선택자>

🔶 선택자 S가 아닌 조건 E 선택

🔷 E:not(S)

 

---

강의 링크: https://bit.ly/3m0t8GM