🧐 넌 몇째 아이니 ?

CSS 선택자는.. 정말 종류가 많다. 오늘은 nth 선택자를 따로 정리해보려고 한다.
first-child | last-child | nth-child | nth-of-type 은 자주 사용되는 선택자들인데 잘만 활용하면 기막히게 사용할 수 있다. 잘 기억해두다가 써먹도록 하자..🧐

🏃🏻‍♀️ CSS SPEEDRUN

번외로 CSS 선택자를 얼마나 빠르고 정확하게 쓸 수 있는지 테스트해볼 수 있는 게임 사이트가 있어서 공유.
집중하다보면 재밌어요. 생각보다 오래걸릴수도?😏 -> CSS Speedrun

📌 nth-child

/* 첫번째 요소 선택 */
.section01 li:first-child{background:skyblue;}

/* 마지막 요소 선택 */
.section02 li:last-child{background:skyblue;}

/* 6번째 요소 선택 */
.section03 li:nth-child(6){background:skyblue;}

/* 홀수 선택 */
.section04 li:nth-child(odd){background:skyblue;}

/* 짝수 선택 */
.section05 li:nth-child(even){background:skyblue;}

/* 세번째 요소마다 선택 */
.section06 li:nth-child(3n){background:skyblue;}

/* 두번째 요소부터 세번째 요소마다 선택 */
.section07 li:nth-child(3n+2){background:skyblue;}

/* 6번부터 모든 요소 선택 */
.section08 li:nth-child(n+6){background:skyblue;}

/* 1번부터 3번까지 요소 선택 */
.section09 li:nth-child(-n+3){background:skyblue;}

/* 3번부터 6번까지 요소 선택  */
.section10 li:nth-child(n+3):nth-child(-n+6){background:skyblue;}

/* 끝에서 3번째 요소 선택 */
.section11 li:nth-last-child(3){background:skyblue;}

/* 끝에서 3번째 요소까지 선택 */
.section12 li:nth-last-child(-n+3){background:skyblue;}

/* 끝에서 3번째 요소부터 세번째 요소마다 선택 */
.section13 li:nth-last-child(3n+3){background:skyblue;}

/* 끝에서 3번째 요소부터 첫번째 요소까지 선택 */
.section14 li:nth-last-child(n+3){background:skyblue;}

/* 그룹 내 형제요소가 5개 이상일 때 전체 선택 */
.section15 li:nth-last-child(n+5),
.section15 li:nth-last-child(n+5) ~ li{background:skyblue;}

/* 그룹 내 형제요소가 3개 이하일 때 전체 선택 */
.section16 li:nth-last-child(-n+3):first-child,
.section16 li:nth-last-child(-n+3):first-child ~ li{background:skyblue;}

/* 3번째 요소만 제외하고 전체 선택 */
.section17 li:not(:nth-child(3)) {background:skyblue;}

🍋 특히.. 잘 보아야 할 부분은 그룹 내 형제 요소가 n개 이하일 때 스타일을 줄 수 있는 부분이다.
기능과 연계해서 사용하면 특정 요소에 스타일을 훨씬 편하게 입히는 것이 가능하다.

📌 nth-of-type

/* group 내 첫번째 div 요소 선택 */
.section01 .group div:first-of-type{background:skyblue;}

/* group 내 마지막 div 요소 선택 */
.section02 .group div:last-of-type{background:skyblue;}

/* 두번째 span 요소 선택 */
.section03 .group span:nth-of-type(2){background:skyblue;}

/* 첫번째 p 요소 부터 두번째 p요소마다 선택 */
.section04 .group p:nth-of-type(2n+1){background:skyblue;}

/* 세번째 p 요소부터 전체선택 + 첫번째 p 요소부터 6개 선택의 교집합 */
.section05 .group p:nth-of-type(n+3):nth-of-type(-n+6){background:skyblue;}

👏🏻 마무리

🐱 : 임시저장에 리스트는 쌓여가는데 정리에 오래걸리고 있다. 근데 오래 작성하는 만큼 기억에 오래 남는 것도 같고 🤔..
아무튼 간단히 빠르게 정리하겠단 마음으로! 나를 위해서(?) 기록합니다. 기록끼록,,

🗂 참조한 문서

• nth-child (n번째 부터 n번째 까지 css적용)
• 제일 마지막 요소부터 세는 nth-last-child()