CSS 선택자 :nth-child

😏 CSS 선택자 :nth-child 

안녕하세요 TriplexLab 입니다.

오늘은 CSS 선택자 :nth-child 대해서 정리해볼게요

📌 다섯 번째 요소 만 선택하기

다섯 번째 요소 만 선택하기

li:nth-child(5) { 
	color: green; 
}

📌 6번째 부터 요소 선택

6번째 부터 요소 선택

li:nth-child(n+6) { 
    color: green; 
}

📌 처음 부터 다섯 가지만 선택하십시오.

처음 부터 다섯 가지만 선택하십시오.

li:nth-child(-n+5) { 
    color: green; 
}

📌 매 넷째 선택, 처음 시작

매 넷째 선택, 처음 시작

li:nth-child(4n-7) { /* or 4n+1 */ 
    color: green; 
}

📌 홀수 또는 짝수 만 선택

홀수 만 선택

li:nth-child(odd) { 
    color: green; 
}

짝수 만 선택

li:nth-child(even) { 
    color: green; 
}

📌 전체중에 중간 일부  선택

전체중에 중간 일부  선택

li:nth-child(n+5):nth-child(-n+8) { 
    color: green;
}

📌 마지막에서 두 번째 요소 선택

마지막에서 두 번째 요소 선택

li:nth-last-child(2) { 
	color: green; 
}

기본 베이스로 참고한 자료

• https://www.w3.org/TR/#tr_CSS
• http://css.maxdesign.com.au/selectutorial/
• https://opentutorials.org/module/484/4149