CSS를 사용하여 목록의 세 번째 항목마다 스타일을 지정 하시겠습니까?

CSS를 사용하여 목록의 세 번째 항목마다 스타일을 지정 하시겠습니까?

---

이 질문에 이미 답변이 있습니다.

• CSS 4 답변 에서 모든 N 번째 요소 선택

세 번째 목록 항목마다 스타일을 지정할 수 있습니까?

현재 내 960px넓은 div에는 왼쪽으로 떠 있고 3x3 격자보기로 표시되는 상자 목록이 있습니다. 그들은 또한 여백 오른쪽을 가지고 30px있지만, 3 번째 6 번째 및 9 번째 목록 항목에이 여백이 있기 때문에 행 아래로 점프하여 그리드가 잘못 표시됩니다.

3 등 6 등과 9 등에 게 다른 클래스를 부여하지 않고 마진 권을 가지지 않도록하는 것이 얼마나 쉬운가요, 아니면 유일한 방법일까요?

---

예, :nth-child선택기로 알려진 것을 사용할 수 있습니다 .

이 경우 다음을 사용합니다.

li:nth-child(3n) {
// Styling for every third element here.
}

: nth-child (3n) :

3(0) = 0
3(1) = 3
3(2) = 6
3(3) = 9
3(4) = 12

:nth-child() Chrome, Firefox 및 IE9 +에서 호환됩니다.

:nth-child()IE6에서 IE8까지의 ​​다른 의사 클래스 / 속성 선택기 사이 에서 사용하기위한 해결 방법 은이 링크를 참조하십시오 .

---

:nth-child선택기를 사용할 수 있습니다.

li:nth-child(3n) {
 /* your rules here */
}

---

이 시도

box:nth-child(3n) {  
     ...
}

데모

nth-child 브라우저 지원

---

:nth-child 당신이 찾고있는 답입니다.

참고 URL : https://stackoverflow.com/questions/13691699/styling-every-3rd-item-of-a-list-using-css