Stylizacja co trzeciego elementu listy za pomocą CSS?

Question

Czy mogę stylizować co trzeci element listy?

Obecnie w moim szerokim dziale 960px mam listę pól, które są unoszone w lewo i są wyświetlane w widoku siatki 3x3. Mają także margines prawa: 30px, ale ponieważ trzecia pozycja na liście 6 i 9 ma taki margines, powoduje, że przeskakują z rzędu, powodując błędne wyświetlanie siatki.

Jak łatwo jest uniemożliwić 3. 6 i 9 miejsce prawo na marginesie bez konieczności przyznawania im innej klasy, czy jest to jedyny sposób, aby to zrobić?

Answer 1

Tak, można użyć tak zwanych selektorów :nth-child.

W tym przypadku należałoby użyć:

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() jest kompatybilny w Chrome, Firefox i IE9 +.

Aby obejść, użyj :nth-child() między innymi selektorami pseudo-klas/atrybutów w IE6 do IE8, see this link.

Answer 2

Spróbuj

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

DEMO

nth-child browser support

Answer 3

Można użyć selektora :nth-child dla tego

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

Answer 4

:nth-child jest odpowiedź szukasz.