nth-child(5n + 5) 패턴 해석
#sec .dot:nth-child(5n + 5) { width:20px; }위 코드는 sec ID를 갖은 요소안에는 많은 요소가 있습니다. 그 중에 dot 클라스들에서 5번째 단위로 골라 폭을 20px 로 만들라는 명령어 입니다. 여기서 ()안을 방정식으로 생각하고, n을 0 번부터 계속된다고 보면 됩니다. 즉 5X0 + 5 는 5, 5x1 + 5 = 10 이러한 방식으로 5의 배수를 선택하라는 명령입니다. /* 목록의 두 번째 선택 */li:nth-child(2) { color: lime;}/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */:nth-child(4n) { color: lime;}
html + css
2025. 5. 13. 14:07
