सीएसएस का उपयोग कर सूची के हर तीसरे आइटम को स्टाइल करना?

Question

क्या मेरे लिए हर तीसरी सूची वस्तु को स्टाइल करना संभव है?

वर्तमान में मेरे 960px विस्तृत div में मेरे पास बक्से की सूची है जो बाईं ओर तैरती हैं और 3x3 ग्रिड व्यू में प्रदर्शित होती हैं। उन्होंने यह भी 30px के अंतर-अधिकार है, लेकिन यह उन्हें ग्रिड प्रदर्शन कर रही है गलत तरीके से

कितना आसान 3 6 बनाने के लिए है और 9 वीं की जरूरत नहीं एक पंक्ति नीचे कूद बनाता है क्योंकि 3 6 और 9 वीं सूची आइटम इस मार्जिन है मार्जिन-दाएं उन्हें एक अलग वर्ग देने के बिना, या यह करने का एकमात्र तरीका है?

Answer 1

हां, आप :nth-child चयनकर्ताओं के रूप में जाना जाने वाला उपयोग कर सकते हैं।

इस मामले में आप का प्रयोग करेंगे:

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

: n वें वाले बच्चे (3n):

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

:nth-child() क्रोम, फायरफॉक्स, और IE9 + में संगत है।

के चारों ओर एक काम/अन्य छद्म वर्गों के बीच :nth-child() का उपयोग IE8, see this link के माध्यम से IE6 में चयनकर्ताओं का श्रेय देने के लिए।

Answer 2

इस

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

DEMO

nth-child browser support

Answer 3

आपको लगता है कि

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

Answer 4

:nth-child के लिए :nth-child का भी उपयोग करेंगे जवाब आप के लिए देख रहे हैं की कोशिश करो।