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> 선택 */
li:nth-child(2) {
  color: lime;
}

/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */
:nth-child(4n) {
  color: lime;
}