[css] सीएसएस में हर एनएच तत्व का चयन करें


Answers

div:nth-child(4n+4) 

देखें: http://css-tricks.com/how-nth-child-works/

Question

तत्वों के एक सेट में हर चौथा तत्व चुनना संभव है?

पूर्व: मेरे पास 16 <div> तत्व हैं ... मैं कुछ लिख सकता हूं।

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

क्या ऐसा करने के लिए इससे अच्छा तरीका है?




आपको nth-child छद्म वर्ग के लिए सही तर्क की आवश्यकता है।

  • an + b से शुरू होने वाले प्रत्येक बच्चे से मेल खाने के लिए तर्क an + b के रूप में होना चाहिए।

  • a और b दोनों वैकल्पिक पूर्णांक हैं और दोनों शून्य या नकारात्मक हो सकते हैं।

    • यदि शून्य है तो कोई "हर बच्चा" खंड नहीं है।
    • यदि ऋणात्मक है तो मिलान b से शुरू होने से पीछे किया जाता है।
    • यदि b शून्य या नकारात्मक है तो सकारात्मक b का उपयोग करके समकक्ष अभिव्यक्ति लिखना संभव है जैसे कि 4n+0 4n+4 समान है। इसी तरह 4n-1 4n+3 समान है।

उदाहरण:

प्रत्येक चौथे बच्चे का चयन करें (4, 8, 12, ...)

li:nth-child(4n) {
  background: yellow;
}
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

1 (1, 5, 9, ...) से शुरू होने वाले प्रत्येक चौथे बच्चे का चयन करें

li:nth-child(4n+1) {
  background: yellow;
}
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

4 (3 और 4, 7 और 8, 11 और 12, समूहों के समूहों से प्रत्येक तीसरे और चौथे बच्चे का चयन करें ...)

/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
  background: yellow;
}
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

पहले 4 आइटम का चयन करें (4, 3, 2, 1)

/* when a is negative then matching is done backwards  */
li:nth-child(-n+4) {
  background: yellow;
}
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>




Related